Sass และ Scss 101

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

Sass และ Scss คืออะไร?

เจ้าสองสิ่งนี้ที่จริงก็คืออย่างเดียวกัน คือเป็นการเขียน CSS รูปแบบหนึ่งซึ่งเมื่อเราเขียนตามแบบ Sass หรือ Scss เราจะเซฟเป็นไฟล์สกุล .Sass/.Scss แล้วทำการ compile ออกมาให้อยู่ในรูปของ CSS เพื่อนำไปใช้ได้ตามปกติ ซึ่งการเขียน Sass, Scss นั้นสไตล์การเขียนจะแตกต่างกัน โดย Scss ที่เกิดมาทีหลังหลักๆแล้วจะมีการเพิ่ม Syntax การใช้เครื่องหมาย { } เพื่อให้การเขียนดูอ่านง่ายยิ่งขึ้น

หลายคนอ่านมาถึงตรงนี้ก็คงรู้สึกว่า ต้องแปลงไฟล์อะไรด้วยเหรอ? ถ้ามันยุ่งยากขนาดนี้ไปใช้ CSS ธรรมดาดีกว่ามั้ย?

จริงๆมันไม่ได้ยากขนาดนั้นนะ!

 แต่ถ้าไม่ลองแล้วจะเสียใจนะ😢

วิธีติดตั้ง Sass และ Scss

การติดตั้งแล้วใช้งานนั้นมีได้หลายวิธีตาม link นี้ : https://sass-lang.com/install

โดยเราจะหยิบการติดตั้งโดยใช้ Node.js มาเป็นตัวอย่าง ดังนั้นเราจะต้องติดตั้ง Node ก่อน : https://nodejs.org/en/

จากนั้นให้เราเปิด terminal ขึ้นมา(ในที่นี้ใช้ผ่าน VScode https://code.visualstudio.com/) แล้วพิมพ์คำสั่งด้านล่างซึ่งจะเป็นการติดตั้งทั้ง Sass และ Scss แล้วรอโหลดซักหน่อยก็เป็นอันเรียบร้อย

npm install -g sass

เริ่มต้นการเขียนได้!

ให้เราลองสร้างไฟล์ .scss ขึ้นมาก่อน(ถ้าใครอยากใช้ Sass ก็ให้สร้างชื่อไฟล์เป็นสกุล .sass) จากนั้นถ้าเราต้องการ compile ไฟล์ .scss ของเราก็เพียงแค่ใช้คำสั่งตามรูปแบบนี้

sass ไฟล์scss ไฟล์cssที่ต้องการสร้างใหม่

การเขียนจริงก็จะเป็นแบบนี้

sass scss/sassTest.scss css/cssTest.css

กดรัน, เท่านี้ก็ compile ออกมาเป็นไฟล์ css แล้ว ไม่ยากใช่มั้ยล่ะ

ตัวอย่างการใช้งาน (Scss)

จาก https://sass-lang.com/guide

การใช้ตัวแปร

Sass และ Scss มีสิ่อำนวยความสะดวกให้เราเขียน css ได้สนุกและง่ายมากขึ้นเช่นการประกาศตัวแปรได้

.scss

$text-color: #FFCC00;

body {
   color: $text-color;
}

จากโค้ดเราสร้างตัวแปร $text-color ที่เก็บค่า #FFCC00 ไว้จากนั้น property ส่วนที่เราต้องการใช้ค่านั้น(property color ใน body) เราก็ใส่ตัวแปรนั้นลงไปได้เลย

จากนั้นก็ compile ซึ่งอีกวิธีในการ compile คือ sass  –watch ซึ่งมันจะคอยดูความเปลี่ยนแปลงของไฟล์ .scss แล้วทำการแก้ไขไฟล์ .css ให้ทันทีหรือถ้ามี syntax error ก็จะแจ้งด้วย

sass --watch scss/sassTest.scss css/cssTest.css

ตัวอย่างเมื่อมี error

ก็จะได้ไฟล์ css ชื่อ cssTest.css ที่มีโค้ดหน้าตาปกติทั่วไปเอาไปใช้ได้เลย

.css

body {
   color: #FFCC00;
}

การเขียน CSS ของ Element ที่ซ้อนกัน

หรือถ้าเราอยากเขียน css สำหรับ element ที่ซ้อนกัน ปกติเราจะต้องเขียนชื่อ parent element ตามด้วย child element แล้วกำหนด property css ถ้าอยากทำเพิ่มอีกก็ประกาศแบบเดิมซ้ำไปอีกแบบนี้

.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;
}

ด้วย Scss เราสามารถเขียนให้ซ้อนเข้าไปได้แบบนี้

.scss

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

Mixins

หรือแม้แต่การเซตค่าให้ property หลายๆตัวด้วยคำสั่งเดียวผ่าน @mixin ที่การทำงานคล้ายฟังก์ชันก็ยังทำได้

.scss

@mixin transform($property) {
   -webkit-transform: $property;
   -ms-transform: $property;
   transform: $property;
}
  
.box { @include transform(rotate(30deg)); }

.css

.box {
   -webkit-transform: rotate(30deg);
   -ms-transform: rotate(30deg);
   transform: rotate(30deg);
}

Operator

จุดนี้เป็นจุดที่ชอบมากๆในการใช้ Sass และ Scss เพราะตอนที่เราประกาศ property เราสามารถใส่สมการคณิตศาสตร์ลงไปได้เลย ไม่ต้องใส่ตัวเลขแค่ตัวเดียวเหมือน CSS ตอนที่กลับมาดูโค้ดเราก็จะได้รู้ว่าตัวเลขนี้ๆเราเอามายังไงกันนะ ที่ใส่ width: 62.5% มีที่มาแบบนี้นี่เอง

.scss

.container {
   width: 100%;
}
 
article[role="main"] {
   float: left;
   width: 600px / 960px * 100%;
}
 
aside[role="complementary"] {
   float: right;
   width: 300px / 960px * 100%;
}

.css

.container {
   width: 100%;
}
 
article[role=main] {
   float: left;
   width: 62.5%;
}
 
aside[role=complementary] {
   float: right;
   width: 31.25%;
}

ทั้งหมดนี้เป็นแค่ตัวอย่างการใช้งาน Sass, Scss เท่านั้นนะ แต่แค่นี้ก็รู้สึกว่าน่าใช้มากๆแล้ว และนี่ยังไม่ใช่ความสามารถทั้งหมดของทั้ง 2 ตัวนะ เช่น เราอาจแยกไฟล์ sass/scss เป็นหลายๆไฟล์ แล้วเรียกค่าจากไฟล์อื่นมาใช้สร้าง property ใน css ได้ และพอ compile แล้วก็จะได้เป็นไฟล์ css ไฟล์เดียวที่เอาไปใช้ได้ทันที! ด้วยคำสั่ง @use ตามด้วยชื่อ patial file ที่ตั้งชื่อนำหน้าด้วยเครื่องหมาย _ เป็นต้น สำหรับคนที่ลองดูหรือลองใช้แล้วถูกใจหรืออยากลองใช้ Sass ดูบ้าง ก็สามารถไปดูความสามารถเพิ่มเติมได้ที่นี่เลย https://sass-lang.com/guide