Sass คืออะไร? + สอนวิธีเขียนแบบเข้าใจง่าย

ทุกวันนี้คงจะไม่มีใครปฏิเสธความสามารถของ CSS Preprocessor อย่าง Sass ได้แล้ว แต่ถ้าใครยังไม่เคยได้ลองใช้มัน หรือเคยลองใช้บ้างแล้วแต่ยังไม่ค่อยคุ้นเคยกับมัน บทความนี้จะช่วยอธิบายถึงพื้นฐานการใช้งานที่จะช่วยให้เราจะสามารถดึงความสามารถของ Sass ออกมาใช้ให้ได้มากที่สุด

• Sass มี feature ต่างๆ ที่จะช่วยเพิ่มความสามารถให้กับการเขียน CSS ของเรา ไม่ว่าจะเป็น Nesting, Variables, Mixins และ Operators
• Nesting — เราสามารถเขียน CSS Selector แบบซ้อนกันได้ เพื่อความสะดวกในการไล่โค้ด
• Variables — เราสามารถสร้างตัวแปรขึ้นมา เพื่อนำค่านั้นไปใช้ต่อในส่วนอื่นๆ ได้
• Mixins — เราสามารถเก็บ CSS Declaration เอาไว้เป็นชุดๆ เพื่อนำไปใช้ต่อในส่วนอื่นๆ ได้
• Operators — เราสามารถใช้เครื่องหมายทางคณิตศาสตร์ในการคำนวณค่าต่างๆ ได้

CSS Preprocessor คืออะไร ?

การจะใช้ CSS Preprocessor นั้น เราจะเขียน CSS ในอีกรูปแบบหนึ่งก่อน จากนั้นเราจะให้ตัว CSS Preprocessor ทำหน้าที่แปลงโค้ดนั้นให้กลับมาเป็นโค้ด CSS แบบปกติ แล้วถึงจะนำโค้ดที่ได้มาไปใช้จริง

แล้วจะทำแบบนั้นไปเพื่ออะไร ?

เพราะการเขียน CSS ในรูปแบบใหม่นี้เอง ที่ทำให้เราสามารถทำอะไรได้หลายๆ อย่าง ที่ลำพังตัว CSS เองนั้นไม่สามารถทำได้ ไม่ว่าจะเป็น

• Nestingสามารถเขียน CSS Selector แบบซ้อนกันได้ เพื่อความสะดวกในการไล่โค้ด
• Variablesสามารถสร้างตัวแปรขึ้นมา เพื่อนำค่าไปใช้ต่อในส่วนอื่นๆ ได้
• Mixinsสามารถเก็บ CSS Declaration ไว้เป็นชุดๆ เพื่อนำไปใช้ต่อในส่วนอื่นๆ ได้
• Operatorsสามารถใช้เครื่องหมายทางคณิตศาสตร์ในการคำนวณได้

วิธีติดตั้ง Sass

หากยังไม่ค่อยเห็นภาพ ขอแนะนำให้ลองเล่นเลยดีกว่า เริ่มจากการติดตั้ง Sass ตามวิธีที่อธิบายไว้ใน Official Website ก่อน แต่ถ้าเราไม่ค่อยถนัด command-line ก็ให้เปลี่ยนมาใช้ tool สำเร็จรูปอย่าง Prepros เลยก็ได้(เพื่อให้ง่ายต่อการอธิบาย บทความนี้จะขอใช้ Prepros) เพียงเท่านี้เราก็พร้อมที่จะใช้งาน Sass แล้ว

Screenshot ของ Prepros ที่เราจะใช้ในการเขียน ​Sass

รู้จักกับ Syntax ของ Sass

การเขียน CSS ด้วย Sass นั้น มี syntax อยู่ 2 แบบ ด้วยกัน ดังนี้

• Sass (.sass)คล้ายกับการเขียน CSS แบบปกติ แต่จะไม่รองรับเครื่องหมายปีกกา จึงต้องมีย่อหน้าในการเขียน CSS Declaration เสมอ
• SCSS (.scss)เหมือนกับการเขียนด้วย CSS แบบปกติเลย (ซึ่งในบทความนี้จะขอเลือกใช้ syntax แบบนี้)

เนื่องจากการเขียน syntax แบบ SCSS นั้น เหมือนกับการเขียน CSS แบบปกติเลย(แต่จะมีฟีเจอร์ของ Sass เพิ่มเข้ามา) เราจึงสามารถเปลี่ยนนามสกุลของไฟล์ CSS เดิมของเรา จาก .css มาเป็น .scss ได้ทันที หรือเราจะสร้างไฟล์เปล่าๆ ขึ้นมาใหม่ แล้วกำหนดนามสกุลให้เป็น .scss ก็ได้

ลองใช้ Prepros

เพื่อความสะดวก เราจะใช้ Prepros ในการ compile ไฟล์ .scss ให้เป็น .css แต่ก่อนอื่น ให้เราสร้าง 2 โฟลเดอร์นี้ ขึ้นมาก่อน

• scssเก็บไฟล์ .scss (เราจะเขียน Sass ที่ไฟล์เหล่านี้ ไม่ยุ่งกับไฟล์ .css แล้ว)
• cssเก็บไฟล์ .css ของเราที่ได้หลังจาก compile ด้วย Prepros แล้ว (ไฟล์เหล่านี้จะถูกนำไปใช้จริงที่ production)

ทีนี้เราจะมาลอง compile ดู ให้เราลากโฟลเดอร์ที่เก็บงานของเรา(ที่ข้างในมีโฟลเดอร์ scss และ css) ไปวางใน Prepros เพียงเท่านี้ เวลาเรามีการแก้ไฟล์ .scss ในโฟลเดอร์ scss Prepros ก็จะ compile ไฟล์เหล่านั้นให้กลายเป็น .css แล้วเซฟลงไปในโฟลเดอร์ css ให้โดยอัตโนมัติ เราอาจลองเปิดไฟล์ .scss ขึ้นมาสักอัน แล้วลองกดเซฟดู ถ้าการ compile เรียบร้อย เราก็จะเห็นไฟล์ .css เพิ่มเข้ามาในโฟลเดอร์ css

ลาก folder งานของเราไปวางบน Prepros เพื่อให้มัน compile ไฟล์ scss ให้เป็น css โดยอัตโนมัติ

เริ่มลงมือเขียน Sass กันเลย !

เมื่อทุกอย่างพร้อมแล้ว ให้เราเข้าไปในโฟลเดอร์ scss แล้วลองสร้างไฟล์ .scss เปล่าๆ ขึ้นมาสักอัน เรากำลังจะเริ่มเขียน ​Sass แล้ว!

1. ลองใช้ Nested selectors

Nested selectors คือการเขียน selector ซ้อนๆ กัน เพื่อให้อ่านได้ง่ายขึ้นและสะดวกในการไล่โค้ด ลองดูตัวอย่างโค้ดต่อไปนี้

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
        display: inline-block;
        a {
            color: red;
            &:hover {
                color: blue;
            }
        }
    }
}

จากโค้ด SCSS ด้านบน เมื่อนำไป compile แล้ว เราก็จะได้โค้ด CSS แบบนี้

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul li {
    display: inline-block;
}
ul li a {
    color: red;
}
ul li a:hover {
    color: blue;
}

อย่างไรก็ตาม การใช้ Nested selectors ก็มีข้อเสียเหมือนกัน หากเราซ้อน selector กันมากๆ แบบนี้

body.single {
    article {
        .entry-header {
            .entry-meta {
                .author {
                    font-style: italic;
                }
            }
        }
        .entry-content {
            p {
                margin: 1em 0;
            }
        }
    }
}

จากโค้ด SCSS ด้านบน เมื่อนำไป compile แล้ว เราก็จะได้โค้ด CSS แบบนี้

body.single article .entry-header .entry-meta .author{
    font-style: italic;
}
body.single article .entry-content p {
    margin: 1em 0;
}

จะเห็นว่าโค้ด CSS ที่ได้มานั้น ไม่ค่อยเหมาะสมเท่าไรนัก ทั้งในเรื่องของ performance ที่แย่ และยังลดความเป็น CSS ลงอีกด้วย (เฉพาะเจาะจงเกินไป)

วิธีที่เหมาะสมกว่าคือการจำกัดการซ้อนกันของ selector ให้ไม่เกิน 3–4 ชั้น จากตัวอย่างเดิม เราอาจเปลี่ยนมาเขียนแบบนี้

.entry-header{
    .author{
        font-style: italic;
    }
}
.entry-content{
    p{
        margin: 1em 0;
    }
}

จากโค้ด SCSS ด้านบน เมื่อนำไป compile แล้ว เราก็จะได้โค้ด CSS แบบนี้

.entry-header .author{
    font-style: italic;
}
.entry-content p {
    margin: 1em 0;
}

จะสังเกตว่าโค้ด CSS ที่ได้มาใหม่นั้น ลดการใช้ descendant selector ไปเยอะมาก ซึ่งจะส่งผลดีในแง่ของ performance และยังช่วยให้ CSS Rule เหล่านั้นไม่เจาะจงจนเกินไปนัก

2. กำหนดค่าที่ใช้บ่อยๆ ให้เป็น Variables

เราสามารถกำหนดค่าที่เราใช้บ่อยๆ ให้เป็นตัวแปรได้ เวลามีการแก้ไข เราจะได้แก้เพียงแค่จุดเดียวเท่านั้น ลองดูตัวอย่างนี้

$black-color: #444444;
$blue-color: #1e73be;
body {
    color: $black-color;
}
a {
    color: $blue-color;
}
จากโค้ด SCSS ด้านบน เมื่อนำไป compile แล้ว เราก็จะได้โค้ด CSS แบบนี้
body {
    color: #444444;
}
a {
    color: #1e73be;
}
แต่ถ้าวันหนึ่ง ลูกค้าอยากให้เราเปลี่ยนสีของลิ้งค์มาเป็นสีแดง เราจะต้องทำอย่างไร ?
$black-color: #444444;
$red-color: #e64946; /* แก้ค่าให้เป็นสีแดง และเปลี่ยนชื่อตัวแปรใหม่เพื่อให้สื่อความหมาย */
body {
    color: $black-color;
}
a {
    color: $red-color; /* เปลี่ยนมาใช้ตัวแปร $red-color แทน */
}
จะเห็นว่าเราต้องแก้ถึง 2 จุดด้วยกัน ซึ่งจริงๆ แล้ว เราควรแก้แค่เพียงค่าของตัวแปรเท่านั้น ที่เป็นเช่นนี้ก็เพราะว่าเราตั้งชื่อตัวแปรไม่เหมาะสมมาตั้งแต่แรกแล้วนั่นเอง วิธีแก้ปัญหาก็คือ ให้เราตั้งชื่อตัวแปรโดยดูจาก "หน้าที่" ของมัน มันมีไว้ทำอะไรก็ให้เอามาตั้งเป็นชื่อตัวแปรเลย จากตัวอย่างเดิม เราก็จะได้ชื่อตัวแปรใหม่แบบนี้
$text-color: #444444;
$link-color: #e64946;
body {
    color: $text-color;
}
a {
    color: $link-color;
}
เพียงเท่านี้ หากมีการแก้สีอีก เราก็จะแก้แค่ที่ค่าของตัวแปรที่เดียว ไม่ต้องมายุ่งกับชื่อตัวแปรอีกแล้ว
3. จัดกลุ่ม CSS Declaration เพื่อใช้ซ้ำด้วย Mixins
Mixins นั้น จะคล้ายๆ กับ Variables เลย เพียงแต่มันจะเก็บเป็นกลุ่มของ CSS Declaration แทน ไม่ได้เก็บเพียงแค่ค่าเพียงค่าเดียวเหมือนกับ Variables และที่สำคัญก็คือ เราสามารถส่งค่าบางอย่างเพื่อเอาไปใช้ภายใน Mixin ได้อีกด้วย
ตัวอย่างของการใช้ Mixin ที่เห็นประโยชน์ชัดๆ ก็คงจะเป็นการใช้ในการเขียน CSS3 ที่เรามักจะต้องใส่ vendor prefix เอาไว้ด้วยเสมอ แบบนี้
.box {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.box-large {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
เพื่อให้การเขียน border-radius สะดวกมากขึ้น ให้เราสร้าง Mixin ขึ้นมาทำหน้าที่นี้โดยเฉพาะไปเลยจะดีกว่า
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}
.box { 
    @include border-radius(10px); /* ส่งค่า 10px */
}
.box-large { 
    @include border-radius(20px); /* ส่งค่า 20px */
}
จากโค้ดด้านบน เราจะใช้ @mixin ในการสร้าง Mixin ขึ้นมาใหม่ และใช้ @include ในการเรียกใช้ Mixin ที่เราสร้างขึ้นมา จะสังเกตว่าตอนที่เราเรียกใช้ Mixin นั้น เราสามารถส่งค่าที่ต้องการจะให้ Mixin เอาไปใช้ได้ด้วย หรือเราอาจจะกำหนดค่า default ไว้เลยก็ได้ ลองดูตัวอย่างนี้
/* กำหนดค่า default ของ radius ให้เป็น 10px */
@mixin border-radius($radius: 10px) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}
.box { 
    @include border-radius; /* หากต้องการ 10px อยู่แล้ว ก็ไม่ต้องส่งค่าอะไร */
}
.box-large { 
    @include border-radius(20px); 
}
นอกจากนั้น เรายังสามารถทำการคำนวณ(+, -, *, /, %) โดยใช้ Sass ได้ด้วย ลองดู Mixin ต่อไปนี้
@mixin center($width, $height){
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height/2)+px;
  margin-left: -($width/2)+px;
}
.box{
  width: 200px;
  height: 100px;
  @include center(200, 100);
}
Mixin ด้านบนนี้ จะใช้สำหรับจัดตำแหน่งให้อยู่กึ่งกลาง โดยเราจะต้องส่งค่า width และ height ของ element ที่ต้องการจะจัดตำแหน่งให้กับ Mixin นำไปหาร 2 แล้วเอาค่าที่ได้ไปเป็น margin เพื่อทำให้ element นั้น อยู่กึ่งกลาง เมื่อลอง compile ดู เราก็จะได้โค้ด CSS หน้าตาแบบนี้
.box {
  width: 200px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px; /* มาจาก 100/2 */
  margin-left: -100px; /* มาจาก 200/2 */
}
หากสังเกตดีๆ จะเห็นว่านอกจาก Mixin จะช่วยให้เขียนโค้ดได้เร็วขึ้นแล้ว มันยังช่วยลดข้อผิดพลาดของเราได้อีกด้วย ลองนึกดูว่าหากเรามี Mixin ดีๆ ไว้ใช้เต็มไปหมด เราจะเขียนโค้ดได้สะดวกมากขึ้นแค่ไหน ต้องขอขอบคุณ tool ดีๆ อย่าง Compass ที่ได้รวบรวม Mixin ที่เป็นประโยชน์มาให้เราใช้กันแบบฟรีๆ ส่วนวิธีใช้ Compass นั้นก็ไม่ยากเลย เพียงแค่เรา import มันเข้ามาก็พร้อมใช้งานในทันที เนื่องจาก Prepros ได้ติดตั้ง Compass มาให้เราตั้งแต่แรกแล้วนั่นเอง
/* import compass เข้ามาก่อน */
@import "compass";
/* ทดลองใช้ Mixin สำเร็จรูปของ Compass */
.box {
    @include box-sizing(border-box);
    @include box-shadow(blue 2px 2px 10px);
}
เราสามารถเข้าไปดู Mixin ที่ Compass เตรียมมาให้ทั้งหมดได้ที่ Compass CSS3

Compass รวบรวม Mixin ที่เป็นประโยชน์มาให้เราใช้กันแบบฟรีๆ
4. แชร์สไตล์ร่วมกันด้วย Extend
Extend นั้นจะคล้ายๆ กับ Mixin เพียงแต่มันจะไม่สามารถรับค่าอะไรได้เลย สมมติว่าเรามีกล่อง alert อยู่ 4 แบบ ด้วยกัน ดังนี้
<div class="alert">Notice</div>
<div class="alert-success">Success</div>
<div class="alert-warning">Warning</div>
<div class="alert-error">Error</div>
สังเกตว่า class alert เฉยๆ จะเป็นการ alert แบบกลางๆ(Notice) แต่ถ้าเป็นการ alert นอกเหนือจากนี้(Success, Warning และ Error) เราจะเติม suffix เข้าไปต่อท้าย จากโค้ด html ด้านบน เราสามารถนำ Extend มาช่วยทำให้โค้ดสั้นลงได้ ลองดูตัวอย่างนี้
/* สไตล์กลางๆ ของ alert */
.alert{
    border: 1px solid black;
    padding: 5px 10px;
    background: yellow;
}
/* สไตล์เฉพาะทางของ alert แบบต่างๆ */
.alert-success{
    @extend .alert; /* ดึงสไตล์กลางมาใช้ */
    background: green;
}
.alert-warning{
    @extend .alert; /* ดึงสไตล์กลางมาใช้ */
    background: orange;
}
.alert-error{
    @extend .alert; /* ดึงสไตล์กลางมาใช้ */
    background: red;
}
จากโค้ด SCSS ด้านบน เมื่อนำไป compile แล้ว เราก็จะได้โค้ด CSS แบบนี้
.alert, .alert-success, .alert-warning, .alert-error {
    border: 1px solid black;
    padding: 5px 10px;
    background: yellow;
}
.alert-success {
    background: green;
}
.alert-warning {
    background: orange;
}
.alert-error {
    background: red;
}
หากสังเกตุที่โค้ดดีๆ จะพบความต่างอีกอย่างระหว่าง Extend กับ Mixin ตรงที่การใช้ Extend นั้นโค้ดที่ได้จะสั้นกว่าเนื่องจากมันจะรวม selector ที่ใช้สไตล์เหมือนกันเอาไว้ใน CSS Rule อันเดียวกันเลย ในขณะที่การใช้ Mixin นั้นจะเป็นเหมือนการคัดลอกกลุ่มของสไตล์แล้วเอามาวางตามจุดที่มีการเรียกใช้ ความแตกต่างตรงนี้เอง ที่ทำให้เราสามารถสรุปได้ว่า เราจะใช้ Mixin ก็ต่อเมื่อเราจำเป็นที่จะต้องส่ง "ค่าบางอย่าง" เข้าไปให้ Mixin เท่านั้น(เช่น ขนาดของ radius) แต่ถ้าไม่จำเป็นต้องส่งค่า ก็ให้เราเปลี่ยนมาใช้ Extend แทน
นอกจาก Extend จะสามารถใช้กับ class selector ได้แล้ว เรายังสามารถใช้กับ placeholder selector ได้อีกด้วย โดย placeholder selector นั้นจะคล้ายกับ class selector เลย เพียงแต่เราจะต้องเปลี่ยนจาก "." มาเป็น "%" เท่านั้นเอง ลองมาดูตัวอย่างต่อไปนี้
%align-center{
    text-align: center;
}
.section-title{
    @extend %align-center;
}
จากโค้ด SCSS ด้านบน เมื่อนำไป compile แล้ว เราก็จะได้โค้ด CSS แบบนี้
.section-title {
    text-align: center;
}
เราจะเห็นว่าการใช้ placeholder selector นั้น ต่างจากการใช้ class selector ตรงที่ตัว placeholder selector เองจะไม่แสดงออกมาในโค้ดหลัง compile
ถึงแม้ว่าการใช้ Extend นั้นจะสามารถลดความซ้ำซ้อนของโค้ดเราได้เป็นอย่างดี อย่างไรก็ตาม การใช้ Extend นั้นจะต้องทำด้วยความระมัดระวัง ลองดูตัวอย่างต่อไปนี้
.widget {
    padding: 10px;
    border: 1px solid black;
}
.sidebar .widget {
    background: grey;
}
.widget-latest-news {
    @extend .widget;
    padding: 20px;
}
จากโค้ด SCSS ด้านบน เมื่อนำไป compile แล้ว เราก็จะได้โค้ด CSS แบบนี้
.widget, .widget-latest-news {
  padding: 10px;
  border: 1px solid black;
}
.sidebar .widget, .sidebar .widget-latest-news {
  background: grey;
}
.widget-latest-news {
  padding: 20px;
}
หากสังเกตโค้ดหลัง compile ดีๆ จะพบว่า Sass นั้น ไป Extend ทุกๆ .widget เลย ซึ่งรวมไปถึง .sidebar .widget ด้วย สาเหตุที่ Sass ต้องทำแบบนี้ก็เพื่อต้องการให้ .widget-latest-news ที่อยู่ใน sidebar มีพื้นหลังสีเทาไปด้วยซึ่งมันก็สมเหตุสมผลอยู่แล้ว แต่หากพิจารณาจากโค้ด มันก็ออกจะดูเยอะกว่าที่เราคิดไว้ ลองนึกดูเล่นๆ ว่า หากเรามีการเขียน .widget ไว้อีกหลายๆ ที่ แล้วเราไป Extend มา โค้ดจะออกมาเยอะแค่ไหน
นอกจากนั้น การใช้ Extend ยังมีข้อจำกัดตรงที่เราไม่สามารถใช้ข้าม @media rule ได้ ลองดูตัวอย่างนี้
%align-center {
    text-align: center;
}
@media screen {
    .section-title{
        @extend %align-center;
    }
}
เมื่อนำโค้ดด้านบนไป compile แล้ว Sass ก็จะบอกว่ามี Error สาเหตุที่ Sass ไม่สามารถ compile การเขียน Extend แบบนี้ได้ ก็เพราะว่าการ Extend นั้น จะรวบ selector ทั้งหมดที่แชร์สไตล์ร่วมกันไว้ใน CSS Rule เพียงอันเดียว นั่นหมายความว่าบาง CSS Rule ที่เคยอยู่ใน @media rule กลับต้องออกมาอยู่ข้างนอก @media rule ซึ่งมันไม่สมเหตุสมผล
ด้วยข้อจำกัดของการใช้ Extend เหล่านี้เอง เราอาจลดการใช้ Extend ให้เหลือน้อยที่สุด แล้วเปลี่ยนมาใช้วิธีเพิ่ม class ที่ต้องการจะ Extend ไปที่ตัว html element แทน ลองดูตัวอย่างนี้
<div class="alert">Notice</div>
<div class="alert alert-success">Success</div>
<div class="alert alert-warning">Warning</div>
<div class="alert alert-error">Error</div>
เมื่อเราเพิ่ม class alert เข้าไปแล้ว เราก็ไม่จำเป็นต้องไป Extend มันอีก
/* สไตล์กลางๆ ของ alert */
.alert{
    border: 1px solid black;
    padding: 5px 10px;
    background: yellow;
}
/* สไตล์เฉพาะทางของ alert แบบต่างๆ */
.alert-success{
    background: green;
}
.alert-warning{
    background: orange;
}
.alert-error{
    background: red;
}
จะเห็นว่าวิธีเพิ่ม class นี้ สามารลดการใช้ Extend ลงได้ ถึงแม้ว่ามันอาจจะไปทำให้โค้ด html มีขนาดใหญ่ขึ้นก็จริง แต่มันก็ช่วยลดความซับซ้อนของ CSS Rule หลังการ compile ได้มากพอสมควรเลยทีเดียว
5. แนวทางในการเขียน Sass
มาถึงตอนนี้ เราก็พอจะเขียน Sass เป็นแล้ว ถึงแม้ว่าการเขียน Sass จะไม่มีหลักตายตัว แต่เพื่อที่จะทำให้การมาไล่โค้ดในภายหลังทำได้สะดวก เราก็อาจเขียนโดยเรียงลำดับตามนี้

• Extendเราจะได้รู้ก่อนเลยว่า selector นี้ ใช้สไตล์ร่วมกับ selector ไหน
• ทั่วไปจากนั้นให้ใส่สไตล์ของ selector นั้น เหมือนกับการเขียน CSS ตามปกติ
• Mixinตามมาด้วย Mixin
• Nested selectorปิดท้ายด้วย Nested selector

เพื่อให้เห็นภาพมากขึ้น ลองมาดูตัวอย่างนี้
.alert {
    @extends %align-center; 
    width: 100%;
    background: yellow;
    @include border-radius;
    .icon {
        float: left;
    }
}
จะเห็นว่าการเขียนโดยยึดหลักดังกล่าว จะช่วยให้เราอ่านโค้ดเข้าใจได้เร็วขึ้น การเอา Extend ไว้ด้านบน ทำให้เราพอจะเดาได้คร่าวๆ ว่า element ที่ตรงกับ selector นี้จะมีหน้าตาเป็นอย่างไร ส่วนสาเหตุที่ต้องเอาสไตล์ทั่วๆ ไป มาคั่นก่อนจะใส่ Mixin ก็เพื่อจะได้แยก Mixin ออกจาก Extend ได้ง่ายๆ นั่นเอง และการใส่ Nested selector เอาไว้ท้ายสุดก็เพื่อเป็นการบอกว่าสไตล์ทั้งหมดของ selector หลักนั้นหมดแล้ว

6. แยกไฟล์ Sass ตามประเภทการใช้งาน

สุดท้ายแล้ว การใช้ Sass นั้น เราไม่จำเป็นต้องเขียนโค้ดทั้งหมดลงในไฟล์ๆ เดียว แต่เราควรแยกเขียนเป็นไฟล์ย่อยๆ แล้วใช้ @import ในการรวมให้เป็นไฟล์เดียวกันหลังจากที่ compile แล้ว เพื่อความสะดวกในการจัดการโค้ด เราอาจจัดโครงสร้างของไฟล์ scss ให้เป็นแบบนี้
scss/
|
|-- configs/                # รวม variables ที่ใช้ใน project
|   |-- _colors.scss        # รวม variables ที่เกี่ยวกับสี
|   ...
|
|-- frameworks/             # เก็บไฟล์ที่ใช้ซ้ำได้ในทุกๆ project
|   |-- _mixins.scss        # รวม mixin ที่เราใช้บ่อยๆ
|   ...
|
|-- themes/                 # เก็บไฟล์ที่ใช้เฉพาะ project นี้เท่านั้น
|   |-- _header.sass        # สไตล์ของ header
|   ...
|
|-- vendors/                # เก็บไฟล์ที่ได้มาจากผู้ผลิตรายอื่น
|   |-- _jquery-ui.scss     # สไตล์ของ jQuery UI
|   ...
|
`-- main.scss               # ไฟล์ Sass หลัก ที่จะ import ไฟล์อื่นๆ เข้ามา
หมายเหตุ: โครงสร้างไฟล์ของการเขียน Sass นั้น ไม่มีรูปแบบที่ตายตัว เราสามารถนำไปปรับเพื่อให้เหมาะสมกับ scale ของงาน
จากโครงสร้างด้านบน เราจะเห็นว่าที่ root มีไฟล์ main.scss อยู่เพียงไฟล์เดียวเท่านั้น ส่วนไฟล์ scss อื่นๆ จะถูกแยกอยู่ตาม folder ต่างๆ ตามลักษณะการใช้งาน สังเกตว่าเราจะต้องใส่ "_" เอาไว้ข้างหน้าชื่อไฟล์เหล่านั้นด้วย เพื่อเป็นการบอก Sass ว่ามันคือ "Partial" ไม่ต้องไป compile ออกมาเป็น .css นะ เพราะยังไงเราก็จะให้ไฟล์ scss หลักของเรา ไป import ไฟล์เหล่านั้นมาอยู่แล้ว เวลา compile เราก็จะได้ไฟล์ main.css มาเพียงแค่ไฟล์เดียว ลองมาดูตัวอย่างโค้ด import ต่อไปนี้
/* ที่ไฟล์ main.scss */
/* import ไฟล์ scss จาก vendors */
@import "vendors/jquery-ui";
...
/* import ไฟล์ scss จาก configs */
@import "configs/colors";
...
/* import ไฟล์ scss จาก frameworks */
@import "frameworks/mixins";
...
/* import ไฟล์ scss จาก themes */
@import "themes/header";
...
จากโค้ดของไฟล์ main.scss จะเห็นว่าเวลาที่เราใช้ @import นั้น เราไม่ต้องใส่ "_" ที่ชื่อ Partial แต่อย่างใด นอกจากนั้น เรายังควร import ไฟล์ scss ของ vendors มาเป็นลำดับแรกเสมอ แล้วค่อยตามด้วยไฟล์จาก frameworks และ themes ตามลำดับ ทั้งนี้ก็เพราะว่าเราจะได้สามารถ override สไตล์จาก vendors ด้วยสไตล์ที่เราเขียนขึ้นมาเองได้นั่นเอง
บทสรุปการใช้ ​Sass
การใช้ Sass ออกจะดูยุ่งยากในช่วงแรกๆ แต่หากเราเริ่มชินกับมันแล้ว ก็จะรู้สึกว่ามันไม่ได้ยากอะไรเลย แล้วผลที่ได้ก็เรียกว่าคุ้มค่าเอามากๆ หากเราวางโครงสร้างของงานดีๆ เตรียมของที่ใช้บ่อยๆ มาให้พร้อม เราจะสามารถทำงานเสร็จได้เร็วกว่าเดิมเยอะเลยทีเดียว