Sass คืออะไร?

Sass คือ เป็นเครื่องมือที่ทำการประมวลผล CSS ออกมา เมื่อเราสร้างไฟล์ .sass หรือ .scss แล้วใช้เครื่องมือในการประมวลผล Sass ทำการ render CSS ออกไปใช้งานใน Web Application ได้เลย

CSS กับ Sass ต่างกันอย่างไร?

ปกติเราก็สามาถเขียน CSS ได้เองอยู่แล้วทำไมเรายังต้องมี Sass อีก ซึ่งต่อไปนี้คือสิ่งที่เราได้จาก Sass

1. เราสามารถเขียน CSS ได้เร็วขึ้น ด้วย Syntax ที่ง่ายขึ้่น
2. เราสามารถแบ่งแยก Sass ออกเป็น Module ทำให้ง่ายต่อการจัดการ
3. เราจะใช้เวลาในการแก้ไข CSS ได้เร็วขึ้น เพราะมีการประกาศตัวแปร เวลาเราแก้ไขค่าของตัวแปรที่เดียวจะมีผลกับทุกๆที่ทันที เช่น เปลี่ยนสีหลัก(primary color)
4. Sass จะ minify CSS ให้เราอัตโนมัติเพราะฉะนั้นขนาดของไฟล์ที่ได้จะเล็กกว่า CSS ที่เราเขียนเองมากๆ
5. เราจะเห็น Error เมื่อเราเขียนผิดไม่ต้องรอไป debug บน browser sass จะบอกเลยว่าเรา error ตรงไหน

เมื่อเราใช้งาน Sass การเขียน CSS จะมีความเป็น programming มากขึ้น

CSS และ SASS

ลองมาดูตัวอย่างความง่ายของ SASS ซึ่งจะทำให้ CSS ที่ดูซับซ้อนอ่านง่ายขึ้นมากๆ

section {
  width: 100px;
  height: 100px;
  
  .class-one {
    width: 50px;
    height: 50px;

    .button {
      color: #074e68;
    }
  }
}

ซึ่ง Sass จะเทียบได้กับ CSS ในตัวอย่างนี้

section {
  width: 100px;
  height: 100px;
}

section .class-one {
  width: 50px;
  height: 50px;
}

section .class-one .button {
  color: #074e68;
}

จะเห็นว่าการเขียนเป็น Block ที่ซ้อนกันจะทำให้อ่านง่ายขึ้นกว่าเดิมเยอะมาก

ทางเลือกอื่นๆนอกจาก Sass

จริงๆแล้ว Sass จะไม่ใช้ CSS Processor เพียงยี่ห้อเดียว เรายังมีทางเลือกอื่นๆได้อีก ดังนี้

1. less
2. stylus

แต่ที่ส่วนใหญ่เราเลือกใช้ Sass เพราะ Sass ถูกเลือกใช้ใน Framework หลักๆ ดังต่อไปนี้

• Tailwind CSS
• Angular
• React
• VueJS

ดังนั้นไม่ว่ายังไงเราก็ต้องเรียนรู้การใช้ Sass

ทำไมเราถึงใช้นามสกุล Scss

การเขียน Sass จะสามารถเขียนได้ 2 แบบคือ

1. การใช้ Sass syntax ที่จะมีหน้าตาแบบนี้

   $font-stack: Helvetica, sans-serif
   $primary-color: #333
   
   body
       font: 100% $font-stack
       color: $primary-color
   

   เราจะใช้ indent ในการแบ่ง block ของ CSS ดังนั้นถ้าเราใช้ syntax ของ Sass เราจะไม่ต้องใส่ ปีกกา({}) และ semi-colon(;)

   Syntax แบบนี้ไม่ค่อยได้รับความนิยมเท่าไหร่เนื่องจากเรียนรู้ได้ยากกว่า

2. เราสามารถใช้ Scss Syntax ที่ยังคงมีความเป็น CSS มากกว่าได้

   $font-stack: Helvetica, sans-serif;
   $primary-color: #333;
   
   body {
       font: 100% $font-stack;
       color: $primary-color;
   }
   

   แบบนี้เรายังต้องใส่ปีกกา({}) และ semi-colon(;) เหมือนการเขียน CSS แบบปกติ

ส่วนใหญ่เราจะนิยมใช้ Scss มากกว่าเพราะส่วนใหญ่เราจะนำ CSS ที่เคยเขียนไว้กลับมาใช้ใหม่ ดังนั้นเราเลยจะเห็น Scss มากกว่าแบบ Sass

อีกเหตุผลนึงก็คือ Web designer จะคุ้นเคยกับการแก้ Scss มากกว่า Sass

ในบทความนี้เราจะใช้ Scss Syntax เป็นหลัก

การใช้งาน Sass เบื้องต้น

Syntax ที่เราต้องรู้จักในการใช้งาน Sass มีดังนี้

1. การประกาศตัวแปร

เราสามารถประกาศตัวแปร เพื่อที่จะได้แก้ง่ายขึ้น

    $primary-color: #333;
    $secondary-color: #eee;

    body {
        color: $primary-color;
    }

    h1{
        color: $secondary-color
    }

ในอนาคตถ้าเราอยากจะเปลี่ยน theme เราสามารถมาแก้ไขที่ตัวแปร $primary-color และ $secondary-color ได้เลย

2. Nested block

เราสามารถใส่ block ซ้อนกันได้แบบนี้ ทำให้เราทำความเข้าใจ css ได้ง่ายขึ้น

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }
}

ผลลัพธ์ที่ได้จะเป็น CSS แบบนี้

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

3. Modules

เราสามารถแยก Scss ออกเป็น file ย่อยๆ ดังนั้นยิ่งไฟล์เล็กเท่าไหร่ก็ยิ่งแก้ได้ง่ายขึ้น ชื่อของ patials file จะนำหน้าด้วย _ ยกตัวอย่างเช่น _mobile.scss

sass file แต่ละ file จะถูกมองเป็น modules เวลาเราเอา module นี้ไปใช้เราจะใช้ keyword @use

ตัวอย่าง เราสร้าง module ขึ้นมาตั้งชื่อว่า _base.scss

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

หลังจากนั้นเอาไปใช้งานใน style.scss ส่วนใหญ่ไฟล์หลักเราจะใช้ชื่อนี้

@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

สังเกตว่าเราใช้ชื่อ module เป็น base เฉยๆไม่ใส่ underscore(_)

4. Mixins

mixins ทำหน้าที่เหมือน function ที่จะมีการรับ parameters เข้ามาแล้ว render CSS ที่ต้องการออกมาให้เรา ยกตัวอย่างเช่น

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}

ในบรรทัดที่ 1-5 จะเป็น mixins ที่รับ parameters 1 ตัวคือ theme โดยคำว่า theme เราจะนำไปใส่ใน background และ box-shadow

หลังจากนั้นในบรรทัดที่ 8 เป็นการนำ theme(mixins) ไปใส่ใน block ของ .info โดยใช้ keyword @include ผลลัพธ์ของ block .info จะออกมาเป็น theme DarkGray เพราะเราไม่ได้ใส่ parameter เข้าไป(DarkGray เป็น default parameter ที่ระบุไว้ในบรรทัดที่ 1)

1
2
3
4
5

.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

ส่วน .alert จะเป็นการใช้ mixins โดยส่ง parameter เข้าไปเป็น DarkRed ซึ่ง CSS ที่ได้จะหน้าตาแบบนี้

1
2
3
4
5

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

สังเกตุว่า .info และ .alert จะมีเนื้อหาเหมือนกันแค่คนละสีเท่านั้น นั่นหมายความว่าสิ่งที่เราต้องเขียนซ้ำไปซ้ำมาบ่อยๆ ย้ายมาไว้ใน mixins จะช่วยให้เรากลับมาแก้ไขได้ง่ายขึ้น

DRY(Don’t repeat yourserlf) อย่าเขียน code ซ้ำกับที่เราเคยเขียนไปแล้ว

5. Extend

@extend เป็น keyword ที่เราใช้เหมือนกับการ inherit ใน OOP ถ้า CSS block ไหนที่เราต้องการเติมบางบรรทัดเข้าไปเพิ่มให้ใช้ extend เหมือนกับ class ที่ต้อง inherit ลงมาเพื่ิอสร้าง properties และ methods เพิ่ม

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

%message-shared ในบรรทัดแรกเป็น base class ที่จะนำไปเพิ่ม property ใน .message และ .success

ผลลัพธ์จาดการ render CSS ออกมาจะเป็นดังนี้

/* render ออกมาจาก %message-shared */
.success, .message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

/* ส่วนนี้มาจาก extend ใน scss บรรทัดที่ 12 */
.success {
  border-color: green;
}

สังเกตุว่า %message-shared จะ render ออกมาแค่ครั้งเดียวที่เหลือแค่เอาชื่อ class มาใส่เท่านั้น

ส่วนไหนที่ไม่ได้นำไป extend ก็แค่ไม่ถูก render ออกมา แต่ไม่มี error

6. Operators

สิ่งที่ทำให้ Sass มีความยืดหยุ่นมากขึ้น คือ operator เพราะเราสามารถใส่ operators ที่ใช้ในการคำนวนทางคณิตศาสตร์(+,-,*,math.div())เข้าไปได้ เช่น

1
2
3
4
5
6

@use "sass:math";

article[role="main"] {
  width: math.div(600px, 960px) * 100%;
  margin: auto;
}

ในบรรทัดแรกเราต้องนำ module math ที่ build-in มากับ Sass อยู่แล้วเข้ามาใช้งาน

math.div() คือการหารแต่เนื่องจากป้องกัน error จากการหารด้วย 0 เราจึงต้องใช้ math.div() แทนเครื่องหมาย /

ในตัวอย่างนี้เราจะคำนวน width โดยใช้ 600/960 และคูณด้วย 100 หน่วนเป็น % ผลลัพธ์จะออกมาเป็น 62.5%

• 600 / 960 = 0.625
• 0.625 * 100% = 62.5%

ดังนั้น CSS ที่ได้ออกมาจะเป็นแบบนี้

1
2
3
4

article[role=main] {
  width: 62.5%;
  margin: auto;
}

อ่านต่อเพิ่มเติมได้ที่

• https://sass-lang.com/guide/#preprocessing