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

Tìm hiểu cách sử dụng CSS @import rule để nhập bảng định kiểu.

CSS @import at-rule cho phép bạn nhập các biểu định kiểu CSS vào các biểu định kiểu CSS khác. Điều này thực tế cho các trang web có cơ sở mã lớn / đang phát triển.

Cách sử dụng cơ bản:

@import url(variables.css);

Phương pháp này cho phép bạn tách các kiểu CSS của mình thành các tệp riêng lẻ cho các biến, kiểu chữ, màu sắc, khoảng cách, v.v. - thay vì giữ tất cả các kiểu của bạn trong một biểu định kiểu lớn.

Sau đó, bạn có thể nhập tất cả các tệp CSS riêng lẻ của mình vào biểu định kiểu CSS chính để thêm tất cả chúng lại với nhau:

/* 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);

Đây là một cách thực tế để giữ mọi thứ được sắp xếp gọn gàng khi codebase của bạn phát triển theo thời gian.

Quan trọng khi sử dụng @import

Điều quan trọng nhất cần biết khi sử dụng @import là bạn phải đặt @import của mình ở đầu chính của bạn Tệp CSS (tệp mà bạn nhập tất cả các tệp CSS của mình vào).

Ví dụ:

/* 
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;
}

Nếu bạn đặt bất kỳ kiểu CSS nào (trong tệp CSS chính của bạn) phía trên @import câu lệnh, nó sẽ bị bỏ qua.

Sử dụng @import với các truy vấn media

Bạn cũng có thể sử dụng @import câu lệnh để nhập bảng định kiểu CSS có điều kiện. Ví dụ:nếu bạn có một biểu định kiểu cụ thể chỉ được tải trên màn hình nhỏ, chẳng hạn như điện thoại thông minh, bạn kiểm soát điều đó bằng cách đính kèm các truy vấn phương tiện vào @import của bạn tuyên bố:

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

Trong ví dụ trên, mobile.css biểu định kiểu sẽ chỉ có hiệu lực trên màn hình có chiều rộng tối đa là 768 pixel.