ติดตั้ง 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 ครับ

image-1

ในขั้นตอนที่ติดตั้ง อย่าลืมเลือกให้ add Ruby เข้าไปใน variable Path ด้วยนะครับ เราจะได้ใช้คำสั่งของ Ruby ผ่าน command line ได้ ดังรูป

image-2

เมื่อติดตั้งเสร็จเรียบร้อยทดสอบการใช้งานโดยกดปุ่ม Windows แล้วพิมพ์ cmd เพื่อเรียก Windows Command line ขึ้นมาครับ

ทดสอบว่าเราติดตั้ง Ruby เรียบร้อยโดยพิมพ์ดังนี้ครับ

ruby --version

ผลลัพธ์ที่ได้ใน command line windows จะเป็นดังนี้ เป็นการแสดง version ปัจจุบันของ Ruby ที่ติดตั้งในเครื่องเรา

image-3

Ruby installer ที่เราได้ติดตั้งไปนั้น มี command gem มาให้เรียบร้อยแล้ว เราสามารถใช้ได้เลยครับ gem เป็น command สำหรับ manage install plugin ต่างๆ ของทางฝั่ง Ruby

ใช้คำสั่งต่อไปนี้เพื่อติดตั้ง Sass

gem install sass

ผลลัพธ์ที่ได้

image-4

ทดลองดู version ของ Sass ด้วยคำสั่ง

sass -v

ผลลัพธ์ที่ได้image-5

ใช้คำสั่ง sass --switch

สร้าง folder HelloSass แล้วเข้าไปใน folder HelloSass > สร้างอีกสอง folder ชื่อว่า scss และ css โดยโครงสร้างจะอยู่ในรูปแบบนี้

image-7

โดยที่

  • 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

image-8

ขั้นตอนสุดท้ายเขียนคำสั่ง 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

ขอบคุณครับ

credit

designil.com

download source code

https://github.com/codesanook/setup-sass-on-windows