Get Adobe Flash player

การใช้ Sass ฉบับย่อเพื่อช่วยเขียน CSS ให้มีประสิทธิภาพมากขึ้น

Sass คืออะไร ?

Sass คือ CSS Preprocessor หรือพูดง่าย ๆ ว่าเราจะเขียน Sass ตามที่ต้องการโดยอาศัยเทคนิคทางด้านการเขียนโปรแกรมโปรแกรมมาช่วยให้เขียนง่ายขึ้น หลังจากนั้นหากต้องการนำไปใช้ จำต้องทำการ Compile เป็น CSS ก่อนจึงจะนำไปใช้ได้

ประโยชน์ของการใช้ Sass นั้นมีมากพอและคุ้มค่าในระยะยาวหากจะต้องทำการเขียน CSS กับงานที่ซับซ้อน มีการแก้ไขบ่อย ๆ ไม่ว่าจะเป็นการกำหนดค่าเป็นตัวแปร แล้วนำไปวางแทนค่าดิบ ๆ  หรือการ Include Code ที่ต้องการใช้ซ้ำ ๆ ซึ่งถ้าเป็น CSS เราจะต้องเขียนใหม่เองทุกบรรทัด หากต้องแก้ ก็ต้องมาไล่แก้ทุกบรรทัด

วิธีการเขียน Sass

การเขียน Sass จะมี Syntax คล้ายคลึงกับ CSS คือถ้าเราเขียน CSS ได้ก็เข้าใจ Sass ได้ไม่ยาก การเขียนจะแบ่งออกเป็น 2 Syntax คือ .sass และ .scss สามารถดูเพิ่มเติมได้ที่ https://sass-lang.com/guide

โดยในตัวอย่างจะใช้ Syntax แบบ SCSS (เหมือน CSS มากกว่า) ดังเช่นการตั้งค่าเป็นตัวแปร แล้วนำไปใช้

เมื่อเขียนเสร็จจะได้ไฟล์ .scss เรายังไม่สามารถนำไปใช้ได้ จะต้องทำการ Compile เป็น CSS ก่อน

วิธีการ Compile Sass เป็น CSS

สามาถทำได้ 2 วิธีคือใช้ Application และ Command line ดูเพิ่มเติมที่ https://sass-lang.com/install แต่ในตัวอย่างจะใช้ Application โดยจะแนะนำให้ใช้เป็น Koala สามารถใช้งานได้ทั้งบน Windows และ Mac และยังเป็น Opensource สามารถ Download ได้ที่ http://koala-app.com/

เมื่อติดตั้งเสร็จแล้วสามารถเปิด Koala แล้วคลิกปุ่ม + เพื่อเลือก Folder Project งานที่ต้องการ ระบบจะแสดงไฟล์ที่ Koala รองรับ (Koala เป็น Tool สำหรับ develop web app ที่ทำได้หลายอย่าง) เราสามารถเลือกไฟล์ .scss ที่ต้องการ แล้วจะมีแถบเมนูขึ้นด้านขวา สามารถคลิกปุ่ม Complie เพื่อสร้างไฟล์ CSS ได้เลย

แต่ถ้าเราเลือก Auto Compile ไว้ ถ้ามีการแก้ไขไฟล์ .scss อีกครั้ง Koala จะทำการ Complie CSS ใหม่ทันที

Leave a Reply

Your email address will not be published. Required fields are marked *