การใช้งาน Sass css อย่างง่ายใน WordPress

ก่อนอื่นก็ enqueue style(โหลด css) ที่เราจะใช้ในธีมหลักที่ไฟล์ functions.php ก่อนเลยครับ ปกติผมชอบโหลดหลังจากสคริปหลักๆพวก Bootstrap และไฟล์ style.css ของธีมหลัก หรือเราจะใช้ style.css ของธีมหลักเลยก็ได้ ถ้าเราเลือกจะใช้ไฟล์หลักของธีม แต่ส่วนตัวผมชอบแยกเป็นอีกไฟล์นึงต่างหาก

wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/css/custom-style.css' );

หลังจากนั้นก็ติดตั้ง Sass ด้วยคำสั่งด้านล่างนี้ครับ แต่ก่อนอื่นในเครื่องต้องลง node js ก่อนนะ

npm install -g sass

แค่นี้เราก็ได้ตัว compile Sass มาไว้ในเครื่องแล้วครับ จากนั้นก็ใช้ Command prompt(ผมใช้ Windows) หรือ Linux ก็น่าจะเป็น Terminal cd เข้าไปในโฟลเดอร์ที่เก็บไฟล์ css ไว้ ซึ่งในกรณีของผมผมเก็บไว้ที่ assets ใน โฟลเดอร์ assets ผมจะมีไฟล์ custom-style.scss อยู่
หลังจากนั้นก็สั่งให้มัน compile ไฟล์ .scss เป็น .css อัตโนมัตด้วยคำสั่งด้านล่างนี้ครับ

sass --watch sass/custom-style.scss:css/custom-style.css

แล้วก็ลงมือเขียนโค้ดในไฟล์ .scss ได้เลยครับ มันก็จะ compile อัตโนมัตทุกครั้งที่เราพิมพ์ๆไปแล้วกด save เลย ซึ่งปกติผมกด Ctrl+s นั่นแหละครับ