สอนเขียน SASS แบบมือใหม่ ตอนที่ 1 – ติดตั้ง เตรียมตัวเขียน SASS

ทุกคนที่เข้าสู่วงการพัฒนาเว็บไซต์ต้องคุ้นเคยกันดีกับการเขียน CSS เพราะถ้าเว็บไซต์ขาด CSS ไปก็คงจะหมดสวย และทุกคนก็คงเคยผ่านความน่าเบื่อในการเขียน CSS เช่น การเขียนรหัสสีที่ซ้ำ ๆ กัน การเขียนให้รองรับกับ Responsive การลดขนาดไฟล์ CSS ให้เล็กที่สุด การรวม CSS หลาย ๆ ไฟล์มาเป็นไฟล์เดียวกัน ทุกปัญหาที่กล่าวมานั้นแก้ได้ด้วยการเขียน SASS ครับ

ก่อนอื่นเรามาทำความรู้จักกับ SASS ก่อนเลยครับ SASS นั้นก็คือเครื่องมือที่จะเข้ามาช่วยให้การเขียน CSS ง่ายขึ้น โดยความสามารถที่น่าสนใจมีดังต่อไปนี้ครับ เราสามารถใช้ตัวแปรเหมือนกับการเขียนโปรแกรมทั่ว ๆ ไปได้ เราสามารถสั่งให้ compile ไฟล์ .sass, .scss เป็น .css เราสามารถ import .sass หลาย ๆ ไฟล์ออกมาเป็น .css ไฟล์เดียวได้ เราสามารถเขียนในรูปแบบ function (แต่ SASS เรียก Mixin) ได้ ซึ่งความสามารถเหล่านี้แหละครับ จะทำให้งานเขียน CSS ของเราง่ายขึ้นมากเลยทีเดียว สำหรับบทความนี้เป็นตอนที่ 1 ผมจะเขียนเกี่ยวกับการติดตั้งและการเตรียมเครื่องมือครับ

การติดตั้ง SASS ด้วย Visualstudio code และ Node.js module

ในส่วนของการติดตั้ง SASS นั้นบอกก่อนเลยนะครับว่าทำได้หลากหลายวิธีมาก โดยอาจจะติดตั้งผ่าน Ruby โดยตรง หรือการติดตั้งผ่าน Application ต่าง ๆ สำหรับวิธีการของผมนั้น ผมจะใช้ Visual Studio Code ในการพัฒนา และจะใช้ SASS ผ่าน Node.js ครับ ดังนั้นผมจึงอยากให้ทุกคนติดตั้ง Visual Studio Code และ Node.js ครับ คงไม่ยากนะครับ เพียงดาวน์โหลดมาแล้วกด Next > Next > Next > Finish

หลังจากที่เราติดตั้ง Visual Studio Code และ Node.js เรียบร้อยแล้ว ต่อไปก็เป็นขั้นตอนการติดตั้ง SASS แล้วครับ ให้เราสร้าง Folder สำหรับที่เราจะพัฒนาเลยครับ สำหรับผมสร้างไว้ที่ D:\DEV\learn-sass ลืมบอกไปครับว่าผมใช้ Windows 10 นะครับ สำหรับท่านอื่น ๆ ก็ลอง ๆ ปรับใช้ดูนะครับ หลังจากสร้าง Folder เรียบร้อยแล้วก็ใช้ Visual Studio Code ของเราเปิด Folder เลยครับ โดยการไปที่ File > Open Folder . . .

หลังจากที่เราเปิด Folder ได้แล้วให้เราเข้า Terminal ของ Visual Studio Code โดยการกด Ctrl + Shift + U จากนั้นจะปรากฎ Tab ขึ้นมาให้เรากดที่ Terminal ในขั้นตอนนี้เราจะสั่ง Node.js ให้ติดตั้ง node-sass นั้นเองครับ ให้เราพิมพ์

npm install -g node-sass less

หลังจากที่เราติดตั้ง SASS Node.js Module แล้วต่อไปเราจะติดตั้ง Gulp เพื่อช่วยให้เราไม่ต้องทำการ Build SASS บ่อย ๆ เพราะ Gulp จะช่วยสังเกตุการณ์ให้ว่า ถ้าหากมีไฟล์ของเรามีการแก้ไข Gulp จะไปสั่ง Build ให้ ทำให้เราประหยัดเวลาในส่วนนี้ไปมาก วิธีการติดตั้งคือการพิมพ์

npm install -g gulp

เอาหล่ะครับ เพียงเท่านี้เราก็พร้อมจะพัฒนา CSS ด้วยการใช้ SASS แล้วครับ ในบทความต่อไปเราจะมาดูวิธีการใช้งาน Visual Studio Code และ Node.js Module กันครับ สำหรับบทความนี้แค่นี้ก่อนนะครับ

April 20, 2017