สอนเขียน SASS แบบมือใหม่ ตอนที่ 2 – Complie .sass และ .scss เป็น .css

หลังจากที่เราได้ทำการติดตั้งเครื่องมือสำหรับพัฒนา SASS ไปแล้ว มาบทความนี้ผมจะพาเพื่อน ๆ ไปเริ่มพัฒนา SASS กันครับ โดยเราจะเริ่มจากการ compile กันก่อนเลย เพราะขั้นตอนการ compile นี้เองเป็นขั้นตอนที่เราจะแปลงไฟล์ .sass และ .scss ให้กลายเป็น .css เพื่อที่เราจะเอาไฟล์ .css ไปใช้กับเว็บไซต์ของเรา โดยขั้นตอนที่เราจะทำการ compile มีดังนี้ครับ

  1. การเลือก Input ที่เป็น .sass, .scss ไฟล์และการกำหนด Output ที่เป็น .css
  2. การสั่งให้ Compile ผ่าน Visual Studio Code Task
  3. การใช้งาน Watcher ของ Gulp เพื่อสั่ง Auto compile เมื่อเราแก้ไขไฟล์ .sass, .scss

หลังจากที่เราทราบคร่าว ๆ แล้วว่าเราจะทำอะไรกันบ้าง ถึงตรงนี้ผมอยากให้ทราบความแตกต่างระหว่าง .sass และ .scss ก่อนนะครับว่ามันคืออะไร

ไฟล์ .sass และ .scss เป็นนามสกุลของไฟล์ที่เราจะใช้ในการพัฒนา SASS โดยความแตกต่างของมันคือโครงสร้างในการเขียน .sass จะเป็นโครงสร้างที่ดูจาก Indent หมายถึงส่วนที่เป็นข้อมูลย่อยจะต้องกด Tab ไป และสำหรับ .scss จะเป็นแบบ Block โดยจะระบุส่วนของข้อมูลย่อยด้วยปีกกา { } ครับ แต่ว่าเราสามารถเลือกเขียนแบบไหนก็ได้ตามใจเรานะครับ

ตัวอย่างการเขียน .sass

ตัวอย่างการเขียน .scss

การเลือก Input ที่เป็น .sass, .scss ไฟล์และการกำหนด Output ที่เป็น .css

ให้เราทำการสร้างไฟล์ที่เราจะใช้ในการพัฒนา สำหรับผมยกตัวอย่างเป็น style.sass เบื้องต้นผมจะสร้างไว้ที่ Root folder เลยนะครับ เพราะผมยังไม่ต้องการจัดการไฟล์ต่าง ๆ ครับ หลังจากที่เราสร้างไฟล์ style.sass เรียบร้อยแล้ว เดี๋ยวเราจะลองเขียนง่าย ๆ ก่อนนะครับ โดยการเขียนดังนี้ครับ

หลังจากที่เราเขียน SASS แล้วให้เราทำการ Save เลยครับ ตอนนี้เราเองก็พร้อมที่จะทำการ Compile แล้วครับ ให้เรากด Ctrl + Shift + U เพื่อเปิดเข้า Terminal ครับ แล้วให้เราพิมพ์ว่า

npm install node-sass
node-sass style.sass > style.css

ถ้าเรา compile สำเร็จจะปรากฎไฟล์ style.css ขึ้นมา ไฟล์นี้แหละครับที่เราจะนำไปใช้ในการพัฒนาเว็บไซต์ของเราครับ

การสั่งให้ Compile ผ่าน Visual Studio Code Task

เอาหล่ะครับ ตอนนี้เราสามารถ Compile .sass ด้วยการใช้ Terminal ได้แล้ว ขั้นตอนต่อไปเราจะใช้ความสามารถของ Visual Studio Code ในการเรียกคำสั่ง Build เพื่อเพิ่มความสะดวกในการ Compile ของเราครับ โดยการที่เราจะเรียกคำสั่ง Build ของ VSC(Visual Studio Code) ให้เรากด Ctrl + Shift + P แล้วพิมพ์ว่า Configure Task Runner จากนั้นเลือก Others เพื่อที่เราจะทำการกำหนด Task ใหม่

จากนั้นให้เราแกไขไฟล์ tasks.json ที่เพิ่งเปิดเข้ามา เพื่อให้สามารถสั่ง Build SASS ด้วยการใช้ Hot key ของ VSC ให้เราแก้ไขไฟล์ดังนี้

หลังจากเราแก้ไขไฟล์แล้วให้เรากด Ctrl + Shift + B เพื่อทำการเรียกคำสั่ง Build และเมื่อเราเรียกคำสั่ง Build แล้ว VSC ของเราจะทำการเรียก Compile SASS ให้เราอีกทีครับ นั้นหมายความว่าต่อไปเราไม่จำเป็นต้องพิมพ์บน Terminal ให้ลำบากอีกแล้วครับ แค่กด Chrl + Shift + B ก็สบายแล้วครับ

การใช้งาน Watcher ของ Gulp เพื่อสั่ง Auto compile เมื่อเราแก้ไขไฟล์ .sass, .scss

เราจะเห็นนะครับว่าทุกครั้งที่เราต้องการ Compile เราต้องทำการเรียกคำสั่ง Build ซึ่งบางทีตรงนี้ก็ทำให้เราเสียเวลากดเหมือนกัน(จริง ๆ มันไม่ได้ยากเย็นอะไรนะ) ดังนั้นผมจะแนะนำวิธีการทำ Auto compile เมื่อเราทำการแก้ไขไฟล์ .sass ให้ครับ โดยวิธีการนี้เราจะต้องทำการติดตั้ง gulp ซึ่งเป็น Node.js module ครับ ให้เราไปที่ Terminal แล้วพิมพ์ว่า

npm install gulp gulp-sass gulp-less

ตอนนี้เราก็พร้อมที่จะเรียกใช้ Gulp แล้วครับ ให้เราสร้างไฟล์ gulpfile.js ขึ้นที่ Root folder ของเราเลยครับ เดี๋ยว Gulp มันจะมาอ่านการตั้งค่าจากไฟล์นี้แหละครับว่าให้ Watch ตัวไหนบ้าง เพื่อสังเกตุการเปลี่ยนแปลงของไฟล์ แล้วไปเรียกการ Build ครับ หลังจากสร้างไฟล์แล้วให้เราแก้ไขดังนี้ครับ

หลังจากเราแก้ไขไฟล์ gulpfile.js แล้วต่อไปให้เราแก้ไขฟล์ tasks.json ด้วยครับ(ไฟล์นี้จะอยู่ใน folder .vscode ครับ) โดยแก้ไขเป็นดังนี้ครับ

ที่นี้ให้เรากด Ctrl + Shift + B 1 ครั้งครับ VSC ของเราจะไปเรียก Task ให้ทำงาน และ Task จะไปเรียก Gulp ให้ทำงาน โดย Gulp จะทำหน้าที่วนลูปตรวจเช็กไฟล์ style.sass ของเราไปเรื่อย ๆ ครับ ทำให้เราไม่ต้องมาเสียเวลากด Ctrl + Shift + B ตลอดครับ

หวังว่าบทความนี้จะทำให้เพื่อน ๆ สามารถพัฒนา SASS บน Visual Studio Code ได้นะครับ หากมีข้อสงสัยฝากข้อความทิ้งไว้ที่ช่องแสดงความคิดเห็นเลยนะครับ

April 20, 2017