การใช้ CSS Preprocessors (Sass/SCSS)

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับการใช้ CSS Variables หรือ Custom Properties ซึ่งเป็นเครื่องมือที่ช่วยให้โค้ด CSS ของเรามีความยืดหยุ่นและบำรุงรักษาง่ายขึ้น ในบทนี้ เราจะก้าวไปอีกขั้นด้วยการทำความรู้จักกับ CSS Preprocessors โดยเฉพาะอย่างยิ่ง Sass/SCSS ซึ่งเป็นหนึ่งใน Preprocessors ที่ได้รับความนิยมมากที่สุด

CSS Preprocessors คืออะไร? ง่ายๆ คือมันเป็นเหมือน "ภาษาเสริม" ที่ช่วยให้เราเขียน CSS ได้อย่างมีประสิทธิภาพและเป็นระบบมากขึ้น จากนั้น Preprocessor จะทำการแปลง (compile) โค้ดที่เราเขียนให้กลายเป็น CSS ที่เบราว์เซอร์เข้าใจได้

ทำไมเราต้องใช้ CSS Preprocessors? CSS เองก็ทำงานได้ดีอยู่แล้วไม่ใช่หรือ? คำตอบคือ แม้ว่า CSS จะมีความสามารถเพียงพอ แต่เมื่อโปรเจกต์ของเรามีขนาดใหญ่ขึ้น การจัดการ CSS อาจกลายเป็นเรื่องที่ซับซ้อนและยุ่งยาก Preprocessors ช่วยแก้ปัญหานี้ด้วยฟีเจอร์ต่างๆ ที่ช่วยให้โค้ดของเรา:

อ่านง่ายขึ้น: ด้วยฟีเจอร์อย่าง Nesting และ Variables
นำกลับมาใช้ใหม่ได้ง่ายขึ้น: ด้วย Mixins และ Partials
บำรุงรักษาง่ายขึ้น: ด้วยการจัดระเบียบโค้ดที่เป็นระบบ

Sass (Syntactically Awesome Style Sheets) มีสอง Syntax หลักคือ:

Sass (Indented Syntax): ใช้การเยื้อง (indentation) แทนวงเล็บปีกกาและเครื่องหมายเซมิโคลอน
SCSS (Sassy CSS): เป็น Syntax ที่คล้ายกับ CSS มากกว่า ใช้เครื่องหมายวงเล็บปีกกาและเซมิโคลอนเหมือน CSS

ในบทความนี้ เราจะเน้นที่ SCSS เนื่องจากมีความคุ้นเคยสำหรับผู้ที่เคยเขียน CSS มาก่อน และเป็นที่นิยมมากกว่าในปัจจุบัน

การติดตั้งและใช้งาน Sass/SCSS

ก่อนที่เราจะเริ่มเขียน SCSS ได้ เราต้องติดตั้ง Sass compiler ก่อน วิธีที่ง่ายที่สุดคือการใช้ Node.js และ npm (Node Package Manager)

ติดตั้ง Node.js: ถ้ายังไม่ได้ติดตั้ง สามารถดาวน์โหลดได้จาก https://nodejs.org/
ติดตั้ง Sass compiler: เปิด Command Prompt หรือ Terminal แล้วพิมพ์ npm install -g sass

หลังจากติดตั้งเสร็จแล้ว เราสามารถ compile ไฟล์ SCSS เป็น CSS ได้โดยใช้คำสั่ง:

sass input.scss output.css

โดยที่ input.scss คือไฟล์ SCSS ของเรา และ output.css คือไฟล์ CSS ที่จะถูกสร้างขึ้น

เพื่อความสะดวกในการพัฒนา เราสามารถใช้ --watch flag เพื่อให้ Sass compiler เฝ้าดูการเปลี่ยนแปลงในไฟล์ SCSS และ compile ใหม่โดยอัตโนมัติ:

sass --watch input.scss output.css

ฟีเจอร์หลักของ Sass/SCSS

Variables

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

การประกาศ Variable ใน SCSS ทำได้โดยใช้เครื่องหมาย $ นำหน้าชื่อ Variable:

$primary-color: #3498db;
$secondary-color: #e74c3c;
$font-size: 16px;

จากนั้นเราสามารถนำ Variable เหล่านี้ไปใช้ใน CSS ของเราได้:

body {
  font-size: $font-size;
  color: $primary-color;
}

.button {
  background-color: $secondary-color;
  color: white;
  padding: 10px 20px;
}

เหตุผลเชิงออกแบบ: การใช้ Variables ช่วยให้เรากำหนดค่าต่างๆ ไว้ที่เดียว และสามารถเปลี่ยนแปลงค่าเหล่านั้นได้อย่างง่ายดายโดยไม่ต้องแก้ไขโค้ดหลายแห่ง ทำให้โค้ดมีความยืดหยุ่นและบำรุงรักษาง่ายขึ้น

Nesting

Nesting เป็นฟีเจอร์ที่ช่วยให้เราเขียน CSS ที่มีความสัมพันธ์แบบลำดับชั้นได้ง่ายขึ้น โดยไม่ต้องเขียน Selector ซ้ำๆ

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

    li {
      display: inline-block;

      a {
        display: block;
        padding: 10px 20px;
        text-decoration: none;
        color: #333;

        &:hover {
          color: $primary-color;
        }
      }
    }
  }
}

โค้ด SCSS ด้านบนจะถูก compile เป็น CSS ดังนี้:

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

nav ul li {
  display: inline-block;
}

nav ul li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
}

nav ul li a:hover {
  color: #3498db;
}

เหตุผลเชิงออกแบบ: Nesting ช่วยให้โค้ดของเราอ่านง่ายขึ้นและแสดงความสัมพันธ์ระหว่าง Element ต่างๆ ได้ชัดเจน แต่ควรใช้ Nesting อย่างระมัดระวัง ไม่ควร Nest ลึกเกินไป เพราะอาจทำให้โค้ดซับซ้อนและยากต่อการบำรุงรักษา

Mixins

Mixins เป็นเหมือนฟังก์ชันใน CSS ที่ช่วยให้เรานำ Property หลายๆ ตัวมาใช้ซ้ำได้ง่ายๆ

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.button {
  @include border-radius(5px);
}

.box {
  @include border-radius(10px);
}

โค้ด SCSS ด้านบนจะถูก compile เป็น CSS ดังนี้:

.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Mixins สามารถรับ Parameter ได้ ทำให้เราสร้าง Mixins ที่มีความยืดหยุ่นสูงได้

@mixin transition($property, $duration) {
  -webkit-transition: $property $duration;
  transition: $property $duration;
}

.element {
  @include transition(opacity, 0.3s);
}

เหตุผลเชิงออกแบบ: Mixins ช่วยลดความซ้ำซ้อนของโค้ด และทำให้เราสามารถเปลี่ยนแปลง Property ที่ใช้ร่วมกันได้ง่ายๆ โดยแก้ไขแค่ใน Mixin เท่านั้น

Partials

Partials คือไฟล์ SCSS ที่ไม่ได้ถูก compile เป็น CSS โดยตรง แต่ใช้สำหรับเก็บโค้ดที่ต้องการนำไปใช้ในไฟล์ SCSS อื่นๆ

เราสามารถสร้าง Partials ได้โดยตั้งชื่อไฟล์ให้ขึ้นต้นด้วยเครื่องหมาย _ เช่น _variables.scss หรือ _mixins.scss

จากนั้นเราสามารถนำ Partials เหล่านี้ไปใช้ในไฟล์ SCSS อื่นๆ ได้โดยใช้คำสั่ง @import:

@import "variables";
@import "mixins";

body {
  font-size: $font-size;
  color: $primary-color;
}

.button {
  @include border-radius(5px);
}

เหตุผลเชิงออกแบบ: Partials ช่วยให้เราจัดระเบียบโค้ด CSS ของเราให้เป็น Module ที่ชัดเจน และทำให้โค้ดมีความเป็นระเบียบมากขึ้น

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับ CSS Preprocessors โดยเฉพาะอย่างยิ่ง Sass/SCSS และฟีเจอร์หลักๆ ของมัน เช่น Variables, Nesting, Mixins และ Partials ฟีเจอร์เหล่านี้ช่วยให้เราเขียน CSS ได้อย่างมีประสิทธิภาพและเป็นระบบมากขึ้น ทำให้โค้ดของเราอ่านง่ายขึ้น นำกลับมาใช้ใหม่ได้ง่ายขึ้น และบำรุงรักษาง่ายขึ้น

ในบทต่อไป เราจะเรียนรู้เกี่ยวกับการจัด CSS ให้เป็นระเบียบด้วย BEM Methodology ซึ่งเป็นแนวทางที่ช่วยให้เราสร้าง CSS ที่มีความยืดหยุ่นและบำรุงรักษาง่ายในระยะยาว