เชื่อว่าทุกคนไม่ว่าใครก็ต้องเคยผ่านการใช้งาน CSS กันมาแล้วทั้งนั้น ไม่ว่าจะเป็นวิชาคอมพิวเตอร์ตอนสมัยอยู่มัธยม หรือใครที่รู้จักเว็บไซต์ก็ต้องต้องรู้จัก CSS และเมื่อรู้จักกับสิ่งนี้ก็ย่อมรู้ว่า เวลาเราเขียน CSS เนี่ยไฟล์ที่ออกมามันทั้งยืดยาว และถ้าเราต้องการคุมโทนหรือจัดวาง Layout ให้หน้าเว็บเราเป็นไปตามที่เราต้องการเนี่ย มันจะต้องใช้ค่าเดิมๆซ้ำๆ โดยที่ไม่มีตัวแปรให้ใช้ วันนี้เลยจะมาแนะนำเครื่องมือที่ช่วยทำให้เราเขียน CSS ได้สนุกมากยิ่งขึ้นเหมือนการเขียนโปรแกรมภาษาอื่นๆเลยล่ะ นั่นก็คือ Sass และ Scss นั่นเอง!
![https://sass-lang.com/](https://b2dmain-ruk.cdn.jelastic.net/wp-content/uploads/2020/07/sass01-1024x505.png)
Sass และ Scss คืออะไร?
เจ้าสองสิ่งนี้ที่จริงก็คืออย่างเดียวกัน คือเป็นการเขียน CSS รูปแบบหนึ่งซึ่งเมื่อเราเขียนตามแบบ Sass หรือ Scss เราจะเซฟเป็นไฟล์สกุล .Sass/.Scss แล้วทำการ compile ออกมาให้อยู่ในรูปของ CSS เพื่อนำไปใช้ได้ตามปกติ ซึ่งการเขียน Sass, Scss นั้นสไตล์การเขียนจะแตกต่างกัน โดย Scss ที่เกิดมาทีหลังหลักๆแล้วจะมีการเพิ่ม Syntax การใช้เครื่องหมาย { } เพื่อให้การเขียนดูอ่านง่ายยิ่งขึ้น
หลายคนอ่านมาถึงตรงนี้ก็คงรู้สึกว่า ต้องแปลงไฟล์อะไรด้วยเหรอ? ถ้ามันยุ่งยากขนาดนี้ไปใช้ CSS ธรรมดาดีกว่ามั้ย?
จริงๆมันไม่ได้ยากขนาดนั้นนะ!
![](https://media.giphy.com/media/qDPg6HNz2NfAk/giphy.gif)
แต่ถ้าไม่ลองแล้วจะเสียใจนะ😢
วิธีติดตั้ง 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