Kiến thức cơ bản về Sass - bài 5 Nhập khẩu - Import

Lượt xem: 1884

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.scssbase.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