ประกอบ partial file ด้วยคำสั่ง Import ใน Sass (ตอนที่ 6)

ในการเขียน CSS จะมีรูปแบบการเขียนโครงสร้างพื้นฐานของไฟล์ เป็น 3 แบบ คือ Modules , partials และ vendor

สำหรับ partials มีลักษณะเป็นการสร้างไฟล์ CSS แยกเป็นไฟล์เล็กๆหลายๆไฟล์ ซึ่งวิธีการเขียนแบบนี้เป็นวิธีเขียนที่ทำให้ง่ายในการเก็บและแก้ไขไฟล์ รวมถึงง่ายในการอ่านโค้ดและเป็นระเบียบ

หลักการตั้งชื่อไฟล์ประเภท partials คือ ไฟล์ย่อยๆที่ถูกแบ่ง จะตั้งชื่อนำหน้าด้วย _ (under score) เพื่อให้ รู้ว่าไฟล์นี้เป็นเพียงไฟล์ partial เท่านั้น ซึ่งในการเขียนไฟล์แบบ partial นี้เองที่เราจะใช้คำสั่ง import

ประกอบ partial file ด้วยคำสั่ง Import

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

หน้าที่ของ Sass จะทำการ import ไฟล์ CSS ต่างๆ เข้ามาที่ไฟล์หลัก แล้วทำการ Compile ออกมาเป็นไฟล์ CSS แค่ไฟล์เดียว ซึ่งจะเป็นการลดจำนวน HTTP request ทำให้การเชื่อมต่อระหว่าง browser กับ server เร็วขึ้น

เช่น _login.sass และ main.sass เราต้องการที่จะ import ไฟล์ _login.sass ลงใน main.sass โดยที่ main.sass เราจะใช้คำสั่งในการนำเข้าคือ @import login ไว้ด้านบน (ใส่แค่ชื่อไฟล์ ไม่ต้องใส่ .sass)

ตัวอย่าง

หลังจากการ generate แล้วจะได้รับไฟล์ CSS ไฟล์ใหม่ไฟล์เดียว

ซึ่งจริงๆแล้วคือการนำ “โค้ดของ partials file มาวางลงในตำแหน่งเดียวกับ บรรทัดที่เขียนคำสั่ง import ของ partials file นั้นๆ ” แล้วสร้างขึ้นเป็นไฟล์ใหม่

เช่น โค้ดใน _login.sass จะถูก copy มาวางใส่ในบรรทัด @import login ใน main.sass