วิธีใช้ CSS @import Rule

เรียนรู้การใช้ CSS @import rule เพื่อ import stylesheets

CSS @import at-rule ให้นำเข้า CSS stylesheets เข้าอีก stylesheet หนึ่ง เหมาะสำหรับเว็บที่ codebase ใหญ่/เติบโต

การใช้งานพื้นฐาน:

@import url(variables.css);

วิธีนี้แยก CSS styles เป็นไฟล์ย่อย: variables, typography, colors, spacing แทนที่จะรวมในไฟล์ใหญ่เดียว

จากนั้น import ทั้งหมดเข้า main stylesheet:

/* main.css */ @import url(variables.css); @import url(elements.css); @import url(colors.css); @import url(typography.css); @import url(spacing.css);

วิธีนี้เก็บโค้ดให้สะอาด organized ตามเวลา

สำคัญเมื่อใช้ @import

สำคัญที่สุด: ต้องวาง @import statements บนสุด ของ main CSS file (ไฟล์ที่ import ทุกอย่างเข้าไป)

ตัวอย่าง:

/* main.css อย่าเพิ่ม CSS ข้างบน import statements! */ @import url(variables.css); @import url(elements.css); @import url(colors.css); @import url(typography.css); @import url(spacing.css); /* เพิ่ม CSS ข้างล่างได้ */ .other-stuff { padding: 16px; background-color: blue; }

ถ้าวาง CSS styling ใดๆ ข้างบน @import จะถูก ignore

ใช้ @import กับ Media Queries

ใช้ @import แบบ conditional ได้ เช่น stylesheet เฉพาะมือถือ (max-width 768px):

@import "mobile.css" screen and (max-width: 768px);

mobile.css จะมีผลเฉพาะจอ max-width 768px