Sass ย่อมาจาก Syntactically Awesome StyleSheets ซึ่งเป็น “CSS Preprocessor” ชนิดหนึ่ง เช่นเดียวกันกับ LESS, Stylus, หรือ PostCSS เป็นต้น
CSS Preprocessor คืออะไร
CSS ย่อมาจาก Cascading Style Sheets เป็นภาษาที่เราใช้ในการควบคุมการแสดงผลบนหน้าเว็บในโปรแกรม web browser (โปรแกรมที่ใช้ในการเปิดหน้าเว็บ)
คำว่า Preprocessor นั้นประกอบด้วย 3 ส่วนคือ pre-, process, และ –or
Pre- มีความหมายเดียวกับคำว่า “before” หรือ “ก่อน” ซึ่งมีนัยเวลาเข้ามาเกี่ยวข้อง
Process คือ กระบวนการใดกระบวนการหนึ่งที่เกิดขึ้น
-or ต่อท้ายคำ หมายความว่า “เป็นผู้กระทำ”
ในทางคอมพิวเตอร์ processor หมายถึง อุปกรณ์หนึ่งที่รับข้อมูลเข้ามา (input) และสร้างผลลัพธ์ (output) ที่เหมาะสมออกไป
วิธีการเขียนไฟล์ .css ในอดีตนั้น เราทำการสร้างไฟล์ .css ขึ้นมาโดยตรง และเขียน CSS code ลงไป จากนั้นก็ทำการเรียกใช้ไฟล์ .css โดยการ link เข้ากับไฟล์ .html และ browser ก็ทำการแสดงผลตามคำสั่งที่เราเขียนเอาไว้ในไฟล์ .css
วิธีการทำงานของ Sass นั้นแตกต่างออกไป แทนที่เราจะเขียน CSS code โดยตรง เราจะเขียน Sass code ในไฟล์ .scss ขึ้นมาก่อน จากนั้นก็สั่งให้ compiler ทำการแปลง Sass Code ให้กลายเป็น CSS code ในไฟล์ .css อีกที
จะเห็นว่า เราไม่ได้เขียน CSS code ขึ้นมาโดยตรง compiler ต่างหากที่แปลง Sass code ไปเป็น CSS code ให้เรา
Sass เป็นกระบวนการที่เราต้องทำก่อน จึงจะได้ CSS code ออกมาใช้งานจริง นั่นคือเหตุผลที่เราบอกว่า Sass เป็น “CSS preprocessor”
ในเว็บไซต์ เรายังคงใช้งานไฟล์ .css โดยการ link เข้ากับไฟล .html เช่นเดิม และเว็บไซต์ของเราไม่รู้เลยว่า โค้ดที่เราเขียนขึ้นในตอนเริ่มต้นนั้น คือ Sass เพราะว่าผลลัพธ์สุดท้ายจาก compiler คือ CSS code ในไฟล์ .css ที่พร้อมใช้งานจริงแล้วเท่านั้น
ทำไมเราถึงต้องใช้ Sass?
Sass เป็นส่วนขยาย (extension) ของ CSS ที่เพิ่มความสามารถบางอย่างลงไป เพื่อแก้ไขปัญหาต่าง ๆ ของการเขียน CSS code ในรูปแบบเดิม
เมื่อก่อน ในแต่ละโปรเจ็กต์หรือแต่ละเว็บไซต์ เราเขียนไฟล์ .css เพียงไฟล์เดียว ที่มีความยาวเป็นพัน ๆ บรรทัด โค้ดเหล่านั้น reuse ไม่ได้ ไม่มี logic ใด ๆ และไม่สามารถบริหารจัดการอะไรไม่ได้เลย
Sass มีคุณสมบัติและเครื่องมือบางอย่างที่ CSS ไม่มี ซึ่งทำให้เราเขียนโค้ดน้อยลง reuse ได้ เขียน logic ลงไปได้ รวมถึงการแยกไฟล์ออกมาเป็นส่วน ๆ ทำให้บริหารจัดการได้ง่าย
ทั้งหมดนั้น ไม่ได้เปลี่ยนแปลงคำสั่งพื้นฐานหรือวิธีการทำงานของ CSS เลย ทำให้ Sass ง่ายต่อการเรียนรู้ และเป็นทางเลือกที่นักพัฒนาซอฟต์แวร์ยุคใหม่เลือกใช้ เพื่อให้ชีวิตการเขียนโค้ดง่ายขึ้น
Sass ทำอะไรได้บ้าง?
ความสามารถโดยรวมแล้ว Sass ทำให้เราเขียน CSS code ได้ ไม่ต่างจากภาษาในการพัฒนาซอฟต์แวร์ทั่วไป เช่น
Variables: เราสามารถประกาศตัวแปรได้ ใช้สำหรับการนำค่าต่าง ๆ กลับมาใช้ซ้ำ (reusable) เช่น ค่าสี (color), ขนาดตัวอักษร (font-size), หรือค่าการเว้นระยะห่างต่าง ๆ (spacing) เป็นต้น [Open in CodePen]
Nesting: เราสามารถเขียนคำสั่งซ้อนกันได้มากเท่าไหร่ก็ได้ตามความต้องการ ทำให้เราเขียนโค้ดน้อยลง แต่ได้ผลลัพธ์เช่นเดิม [Open in CodePen]
Operators: เราสามารถเขียนการคำนวณทางคณิตศาสตร์ใน Sass ได้ [Open in Codepen]
Partials และ import: เป็นคุณสมบัติของ Sass ที่สำคัญและมีประโยชน์มาก ทำให้เราสามารถแยกไฟล์ .scss เป็นส่วน ๆ ตามต้องการ (CSS Architecture) และทำการ import ไฟล์ทั้งหมดเข้ามาใช้งานในไฟล์ ๆ เดียวได้ (main.scss)
Mixins: ทำให้เราสามารถแยกโค้ดเป็นส่วน ๆ และนำมาใช้ในจุดใด ๆ ก็ได้ตามต้องการ (reusable) [Open in CodePen]
Functions: หลักการใช้งานคล้าย ๆ กับ Mixins สิ่งที่แตกต่างคือ functions สามารถคำนวณค่าออกมาใช้งานได้ (เหมือนกับ function ทั่วไปในการเขียนโปรแกรม) [Open in CodePen]
Extends: ทำให้เราสามารถสร้าง Selectors ที่แตกต่างกัน จากนั้นทำการสืบทอด (inherit) คำสั่งต่าง ๆ (declaration) ที่เหมือนกันมาใช้งานร่วมกันได้ [Open in CodePen]
Control directives: เป็นการใช้งานสำหรับโค้ดที่ซับซ้อน เช่น เงื่อนไข (conditionals) และ การทำซ้ำ (loops) ซึ่งใช้ในการเขียน CSS framework เป็นต้น [More…]
รูปแบบการเขียน Sass
Syntaxes ของ Sass มี 2 รูปแบบคือ Sass syntax และ SCSS syntax
Sass syntax
เป็นรูปแบบแรกของ Sass จากโค้ดฝั่งซ้ายมือจะเห็นว่า การย่อหน้ามีความหมาย ไม่ได้ใช้เครื่องหมายปีกกา (curly braces) และเครื่องหมาย อัฒภาค (semicolons) แต่อย่างใด
SCSS syntax
SCSS ย่อมาจาก Sassy CSS คือโค้ดฝั่งขวามือ จะเห็นว่ารูปแบบหน้าตาแทบจะไม่ต่างจาก CSS code แบบเดิมเลย
ในการเลือกใช้งาน สามารถเลือกได้ตามความถนัดและความชอบส่วนตัว เพราะทั้งสองรูปแบบมีผลลัพธ์ที่ได้จากการทำงานนั้นเหมือนกัน ต่างกันแค่หน้าตาเท่านั้น
สรุป
Sass คือส่วนขยายของ CSS ที่เป็น CSS Preprocessor มันเกิดขึ้นมาเพื่อแก้ปัญหาการเขียน CSS ในรูปแบบเดิม Sass มีคุณสมบัติแทบจะไม่ต่างจากการเขียนภาษาในการพัฒนาซอฟต์แวร์ทั่วไป มีให้เลือกเขียน 2 แบบคือ Sass syntax และ SCSS syntax
อ้างอิง
https://www.udemy.com/share/1000cABUMZeFhWQHQ=/
https://sass-lang.com/documentation/file.SASS_REFERENCE.html
https://dictionary.cambridge.org/dictionary/english/syntactically?q=Syntactically
https://dictionary.cambridge.org/dictionary/english/awesome?q=Awesome
https://developer.mozilla.org/en-US/docs/Web/CSS
https://developer.mozilla.org/en-US/docs/Glossary/CSS_preprocessor
https://developer.mozilla.org/en-US/docs/Glossary/CSS
https://developer.mozilla.org/en-US/docs/Glossary/browser
https://dictionary.cambridge.org/dictionary/english/pre
https://dictionary.cambridge.org/dictionary/english/process
https://dictionary.cambridge.org/dictionary/english/processor
https://en.wikipedia.org/wiki/Preprocessor
https://dev.to/sarah_chima/sass-control-directives-6hk
