Cách sử dụng quy tắc CSS @import

Tìm hiểu cách dùng quy tắc @import CSS để import stylesheet.

Quy tắc @import at-rule cho phép bạn import các CSS stylesheet vào stylesheet khác. Rất thực tế cho website có codebase lớn/đang phát triển.

Cách dùng cơ bản:

@import url(variables.css);

Phương pháp này cho phép tách CSS styles thành các file riêng cho variables, typography, colors, spacing, v.v. — thay vì giữ tất cả styles trong một file stylesheet lớn.

Sau đó bạn import tất cả file CSS riêng lẻ vào main CSS stylesheet để gom chúng lại:

/* File CSS main.css của bạn */ @import url(variables.css); @import url(elements.css); @import url(colors.css); @import url(typography.css); @import url(spacing.css);

Đây là cách thực tế giữ mọi thứ sạch sẽ, tổ chức tốt khi codebase lớn dần theo thời gian.

Quan trọng khi dùng @import

Điều quan trọng nhất khi dùng @import là bạn phải đặt các statement @import ở đầu file main CSS (file mà bạn import tất cả CSS file khác vào).

Ví dụ:

/* File CSS main.css Đừng thêm CSS nào phía trên import statements! */ @import url(variables.css); @import url(elements.css); @import url(colors.css); @import url(typography.css); @import url(spacing.css); /* Bạn có thể thêm CSS bên dưới */ .other-stuff { padding: 16px; background-color: blue; }

Nếu bạn đặt bất kỳ CSS styling nào (trong main CSS file) phía trên các statement @import, nó sẽ bị bỏ qua.

Dùng @import với media queries

Bạn cũng có thể dùng statement @import để import stylesheet có điều kiện. Ví dụ, nếu bạn có stylesheet riêng chỉ load trên màn hình nhỏ như smartphone, bạn kiểm soát bằng cách gắn media queries vào statement @import:

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

Trong ví dụ trên, stylesheet mobile.css chỉ có hiệu lực trên màn hình max-width 768 pixel.