วิธีใช้กฎ CSS @import

เรียนรู้วิธีใช้ CSS @import rule เพื่อนำเข้าสไตล์ชีต

CSS @import at-rule อนุญาตให้คุณนำเข้าสไตล์ชีต CSS ลงในสไตล์ชีต CSS อื่น ใช้งานได้จริงสำหรับเว็บไซต์ที่มีฐานโค้ดขนาดใหญ่/กำลังเติบโต

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

@import url(variables.css);

วิธีนี้ช่วยให้คุณแยกสไตล์ CSS ออกเป็นไฟล์แต่ละไฟล์สำหรับตัวแปร แบบอักษร สี ระยะห่าง ฯลฯ แทนที่จะเก็บสไตล์ทั้งหมดไว้ในสไตล์ชีตขนาดใหญ่แผ่นเดียว

จากนั้น คุณสามารถนำเข้าไฟล์ CSS แต่ละไฟล์ของคุณไปยังสไตล์ชีต CSS หลักของคุณเพื่อเพิ่มทั้งหมดเข้าด้วยกัน:

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

นี่เป็นวิธีปฏิบัติจริงในการจัดระเบียบทุกอย่างให้เป็นระเบียบเมื่อ codebase ของคุณเติบโตขึ้นเรื่อยๆ

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

สิ่งสำคัญที่สุดที่ควรทราบเมื่อใช้ @import คือคุณต้องใส่ @import . ของคุณ ข้อความที่ด้านบนสุดของ main . ของคุณ ไฟล์ CSS (ไฟล์ที่คุณนำเข้าไฟล์ CSS ทั้งหมดของคุณ)

ตัวอย่าง:

/* 
Your main.css CSS file 
Don’t add CSS above your import statements! 
*/
@import url(variables.css);
@import url(elements.css);
@import url(colors.css);
@import url(typography.css);
@import url(spacing.css);

/* 
You can add CSS below
*/

.other-stuff {
    padding: 16px;
    background-color: blue;
}

หากคุณใส่สไตล์ CSS ใดๆ (ในไฟล์ CSS หลักของคุณ) เหนือ @import งบก็จะถูกละเว้น

การใช้ @import กับข้อความค้นหาสื่อ

คุณยังสามารถใช้ @import คำสั่งที่จะนำเข้าสไตล์ชีต CSS แบบมีเงื่อนไข ตัวอย่างเช่น หากคุณมีสไตล์ชีตเฉพาะที่ควรโหลดบนหน้าจอขนาดเล็ก เช่น สมาร์ทโฟน คุณควบคุมได้โดยการแนบข้อความค้นหาสื่อไปยัง @import ของคุณ คำสั่ง:

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

ในตัวอย่างข้างต้น mobile.css สไตล์ชีตจะมีผลกับหน้าจอที่มีความกว้างสูงสุด 768 พิกเซลเท่านั้น