การใช้งาน Sass ในการพัฒนา Front-end

สารจากนักเขียน

สวัสดีครับเพื่อน ๆ ทุกคน ผมไฟท์จากโครงการ Dev Init ตำแหน่ง Front-end Developer วันนี้ผมจะมาอธิบายวิธีการใช้งาน Sass ซึ่งเป็น CSS Preprocessor ที่เป็นตัวช่วยในการลดความซ้ำซ้อนในการเขียน ทำให้เขียน CSS ได้ง่าย และมีประสิทธิภาพมากขึ้น เราสามารถใช้งาน Sass ยังไงได้บ้างมาดูกันเลย!!

Sass คืออะไร คล้ายกับ SCSS หรือเปล่า?

ก่อนอื่นเรามาทำความรู้จักกับ Sass และ SCSS กันก่อน Sass (Syntactically Awesome Style Sheets) และ SCSS (Sassy CSS) เป็นสองรูปแบบของภาษา Sass ที่ใช้สำหรับการเขียนและจัดรูปแบบ CSS แม้ว่ามีรูปแบบการเขียนที่แตกต่างกัน แต่ทั้งสองรูปแบบนี้ถูกพัฒนามาเพื่อเพิ่มประสิทธิภาพในการเขียนเหมือนกัน ในปัจจุบัน SCSS เป็นรูปแบบที่มีความนิยมมากกว่า Sass มาก

เนื่องจากมันใช้รูปแบบการเขียนที่คล้ายกับ CSS ที่คนสามารถทำความเข้าใจและนำไปใช้งานได้ง่ายมากขึ้น แต่ตัว Sass จะมีข้อดี คือ จะมีการเขียน CSS ในรูปแบบที่สั้นกว่ามาก เนื่องจาก Sass ไม่จำเป็นต้องเขียน {} และ ; ก็สามารถรันได้ นอกจากนี้ทั้งสองรูปแบบนี้ต้องผ่านขั้นตอนคอมไพล์ (compile) เพื่อแปลงโค้ด Sass หรือ SCSS เป็นโค้ด CSS ที่เบราว์เซอร์สามารถอ่านและแสดงผลได้

แค่อ่านอาจจะยังไม่เข้าใจ ดังนั้นในหัวข้อต่อไป ผมจะยกตัวอย่างการใช้งาน Sass และ SCSS เพื่อให้เห็นความแตกต่างของทั้งสองรูปแบบ โดยจะมีการเปรียบเทียบกับ CSS แบบปกติด้วยนะครับ

Variables

ใน Sass สามารถสร้าง Variables ตัวแปรมาเก็บข้อมูลที่ผู้ใช้คาดว่าจะใช้หลายครั้งในเว็บไซต์ เช่น ฟอนต์ หรือธีมสีของเว็บไซต์ และสามารถนำตัวแปรนั้นกลับมาเรียกใช้ใหม่ได้ มีตัวอย่างการใช้งาน ดังนี้

Sass:

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

body
  font: 100% $font-stack
  color: $primary-color

SCSS:

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

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

CSS:

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

จาก code จะเห็นว่ามีการใช้ตัวแปร $font-stack และ $primary-color เรียกใช้งานใน body ซึ่งตัวแปรเหล่านี้สามารถเรียกใช้ซ้ำอีกกี่ครั้งก็ได้

Nesting

Sass จะช่วยให้ผู้ใช้สามารถ เขียนคำสั่ง CSS ซ้อนกันได้ตามลำดับโครงสร้างของ HTML element โดยมีข้อควรระวัง คือ อย่าเขียนให้ซ้อนกันมากเกินไป เพราะอาจจะทำให้ยากต่อการพัฒนา และการแก้ไขได้ มีตัวอย่างการใช้งาน ดังนี้

Sass:

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

SCSS:

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

CSS:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

จากโค้ดจะเห็นว่าการเขียน CSS ของ ul และ li ซึ่งอยู่ใน nav จะสามารถขึ้นบรรทัดใหม่ และทำการเว้นวรรค หรือ indent เข้าไปก็สามารถเขียนต่อได้เลย

Mixins

ใน Sass สามารถสร้าง Mixins หรือ Functions ได้ คล้ายกันกับในภาษา Programming อื่น ๆ เพื่อใช้ในการทำงานซ้ำ ๆ หรือสร้างโค้ดที่มีความยืดหยุ่นมากขึ้น โดยการนำไปใช้ในหลาย ๆ ส่วนของโค้ด

Sass:

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

.info
  @include theme

.alert
  @include theme($theme: DarkRed)

.success
  @include theme($theme: DarkGreen)

SCSS:

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

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

CSS:

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

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

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

จากโค้ดจะมีการสร้าง mixin ที่ชื่อว่า theme โดยมีการกำหนดตัวแปร $theme ที่ใช้สำหรับการเปลี่ยนค่าใน mixin ได้ ซึ่งผู้ใช้งานสามารถแก้ไข และเรียกใช้อีกเมื่อไหร่ก็ได้

สรุป

ก็จบกันไปแล้วนะครับกับการใช้งาน Sass เบื้องต้น เพื่อน ๆ ทุกคนสามารถเลือกใช้งานตามความถนัดได้เลย ไม่ว่าจะเป็น Sass ที่ช่วยให้เขียน code ได้กระชับและสั้นมากขึ้น หรือ SCSS ที่มีความคล้ายกับ CSS ทำให้ง่ายต่อการเรียนรู้ สรุปก็คือการใช้งาน CSS preprocessor จะเน้นไปที่การ reuse โดยการกำหนดตัวแปรมารับข้อมูลต่าง ๆ หรือสร้างฟังก์ชันมาใช้งาน ทั้งหมดก็เพื่อลดความซ้ำซ้อนในการเขียน และช่วยให้งานของเรามีประสิทธิภาพมากขึ้นนั้นเอง

อ้างอิง

1. Sass Basics, สืบค้นเมื่อ 10 ตุลาคม 2566
   จาก: https://sass-lang.com/guide/