Sass SCSS import แต่ไม่ต้องการให้สร้าง CSS ของ file ที่ import เข้ามา

ใน Sass เราสามารถ import SCSS file อื่นๆ เข้ามาที่ file หลักด้วยคำสั้งต่อไปนี้

ในตัวอย่างนี้เรากำหนด main.scss ที่เป็น file หลัก ใช้คำสั่ง @import ดังนี้

@import "header";
@import "footer";

ชื่อของ file จริงๆ ที่เรา import เข้ามา คือ header และ footer ต้องตั้งชื่อนำหน้าด้วย _ (under score) ซึ่งทำให้ sass command ไม่สร้าง header.css และ footer.css ขึ้นมาด้วย

ตัวอย่างโครงสร้าง file ใน folder

• main.scss
• _header.scss
• _footer.scss

คำสั่ง --watch ที่จะ update CSS ใหม่เสมอ เมื่อมีการแก้ไข file SCSS ใดๆ ก็ตาม

sass --watch scss:css

ทุก .scss file ที่อยู่ใน folder scss ก็จะถูกแปลงเป็น .css เก็บใน folder css โดยอัตโนมัติ

download source code https://github.com/codesanook/sass-import-file

เรียนรู้เพิ่มเติมเกี่ยวกับ Sass

ติดตั้ง Sass บนเครื่อง Windows และใช้คำสั่ง watch ในการ covert css file