ติดตั้ง Sass บนเครื่อง Windows และใช้คำสั่ง watch ในการ convert css file อัตโนมัติ
ก่อนอื่นเลย บทความนี้ได้รับแรงบันดาลใจ จากบทความใน designil.com เลย SASS คืออะไร? เทคนิคช่วยให้การเขียน CSS เป็นเรื่องง่าย ๆ ใช้กันทั่วโลก !! ซึ่งได้อธิบายประโยชน์ของการใช้งาน Sass แบบละเอียดไว้แล้ว ผมจึงขอไม่อธิบายเพิ่มเติมอีก ขอ credit ให้กับน้อง Perch เลยครับ เขียนไว้ดีมากๆ เลย
ขอกล่าวแบบสรุปแล้วกันนะครับ ว่า SASS คือ CSS Preprocessor ซึ่งทำงานเหมือนกับ LESS CSS มีหลักการเขียนโดยทั่วไปแบบ CSS
โดยเพิ่มความสามารถต่างๆ ให้กับ CSS เช่น สามารถนำ code กลับมา reuse ได้ ประโยชน์หลักเลยก็คือ เมื่อ project ของเราใหญ่ขึ้น การเขียน CSS แบบธรรมดาจะ maintenance ได้ยาก Sass เข้ามาเป็นตัวช่วยในส่วนนี้ครับ
หลักการทำงานของ Sass ก็คือ เราเขียนคำสั่งลงไปใน .scss หรือ .sass โดยหลังจากเขียนเสร็จแล้วก็ใช้ command line tool แปลง .scss หรือ .sass ไปเป็น .css ใช้งานตามปกติเลยครับ
มาเริ่มกันเลยนะครับ
สิ่งที่เราจะทำกันเพื่อใช้งาน Sass
- ติดตั้ง Sass ด้วย Ruby Gem
- ใช้ command sass --watch เพื่อแปลง .scss ไปเป็น .css อัตโนมัติ
- ทดลองเขียนคำสั่ง Sass แบบง่ายๆ
ติดตั้ง Sass ด้วย Ruby Gem
เริ่มจาก download Ruby windows installer จาก http://rubyinstaller.org/downloads เลือก version ล่าสุดได้เลยครับ สำหรับเครื่อง 64 bit ก็เลือก version ที่มีข้อความ x64 bit ครับ
ในขั้นตอนที่ติดตั้ง อย่าลืมเลือกให้ add Ruby เข้าไปใน variable Path ด้วยนะครับ เราจะได้ใช้คำสั่งของ Ruby ผ่าน command line ได้ ดังรูป
เมื่อติดตั้งเสร็จเรียบร้อยทดสอบการใช้งานโดยกดปุ่ม Windows แล้วพิมพ์ cmd เพื่อเรียก Windows Command line ขึ้นมาครับ
ทดสอบว่าเราติดตั้ง Ruby เรียบร้อยโดยพิมพ์ดังนี้ครับ
ruby --version
ผลลัพธ์ที่ได้ใน command line windows จะเป็นดังนี้ เป็นการแสดง version ปัจจุบันของ Ruby ที่ติดตั้งในเครื่องเรา
Ruby installer ที่เราได้ติดตั้งไปนั้น มี command gem มาให้เรียบร้อยแล้ว เราสามารถใช้ได้เลยครับ gem เป็น command สำหรับ manage install plugin ต่างๆ ของทางฝั่ง Ruby
ใช้คำสั่งต่อไปนี้เพื่อติดตั้ง Sass
gem install sass
ผลลัพธ์ที่ได้
ทดลองดู version ของ Sass ด้วยคำสั่ง
sass -v
ผลลัพธ์ที่ได้
ใช้คำสั่ง sass --switch
สร้าง folder HelloSass แล้วเข้าไปใน folder HelloSass > สร้างอีกสอง folder ชื่อว่า scss และ css โดยโครงสร้างจะอยู่ในรูปแบบนี้
โดยที่
- scss เราจะเอาไว้เก็บ .scss file
- ส่วน css จะเอาไว้เก็บ .css file ที่ถูก convert มาแล้วครับ
กลับเข้าไปที่ folder HelloSass **แล้วพิมพ์ Ctrl+D ตามด้วย cmd ** เพื่อเปิด command line ที่ folder HelloSass
พิมพ์คำสั่งต่อไปนี้ เพื่อให้ .scss ใน folder scss แปลงไปเป็น .css ในเก็บใน folder css โดยอัตโนมัติ
sass --watch scss:css
ผลลัพธ์ใน command line windows
ขั้นตอนสุดท้ายเขียนคำสั่ง Sass อย่างง่าย
สร้าง file hello.scss ใน sass folder ครับ แล้วเพิ่มคำสั่งของ sass เข้าไปดังนี้
$orange-theme : #ed652e;
h1 {
background-color: $orange-theme;
}
file hello.css จะถูกสร้างขึ้นมาโดยอัตโนมัติ ใน folder css hello.css
h1 {
background-color: #ed652e;
}
อธิบายคำสั่งใน hello.scss
$orange-theme เป็นการสร้างตัวแปรใน Sass แล้วเก็บค่าสีไว้ แล้วนำค่านี้ไปใช้กำหนดเป็น background color ของ h1 element
เราสามารถ reuse ตัวแปรนี้ได้อีกกี่ที่ก็ได้ครับ เวลาจะแก้ก็แก้ที่เดียว
ยังมี feature อื่นๆที่น่าสนใจและช่วยเพิ่มประสิทธิภาพในการทำงานได้อีกมาก สามารถอ่านเพิ่มเติมได้จาก http://www.designil.com/sass-css-scss-tutorial.html
ขอบคุณครับ