Kiến thức cơ bản về Sass - bài 5 Nhập khẩu - Import
Lượt xem: 2148
Nhập khẩu - Import
CSS có một tùy chọn nhập cho phép bạn chia CSS của mình thành các phần nhỏ hơn, dễ bảo trì hơn. Hạn chế duy nhất là mỗi lần bạn sử dụng @import trong CSS, nó sẽ tạo một yêu cầu HTTP khác.
Sass xây dựng trên CSS @import hiện tại nhưng thay vì yêu cầu HTTP, Sass sẽ lấy tệp mà bạn muốn nhập và kết hợp nó với tệp bạn đang nhập để bạn có thể cung cấp một tệp CSS duy nhất cho web trình duyệt
Giả sử bạn có một vài tệp Sass, _reset.scss và base.scss. Chúng tôi muốn nhập _reset.scss vào base.scss
Cú pháp SASS
// _reset.sass
html,
body,
ul,
ol
margin: 0
padding: 0
// base.sass
@import reset
body
font: 100% Helvetica, sans-serif
background-color: #efefef
Cú pháp SCSS
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
// base.scss
@import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
Đầu ra CSS
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
Lưu ý rằng chúng tôi đang sử dụng @import 'reset'; trong tệp base.scss. Khi bạn nhập tệp, bạn không cần bao gồm phần mở rộng tệp .scss.Sass rất thông minh và sẽ tìm ra nó cho bạn.
Nguồn sass-lang.com