Sass @import và Partials
Sass giữ mã CSS DRY (Đừng lặp lại chính mình). Một cách để viết mã DRY là giữ mã liên quan trong các tệp riêng biệt.
Bạn có thể tạo các tệp nhỏ bằng đoạn mã CSS để đưa vào các tệp Sass khác. Ví dụ về các tệp như vậy có thể là: tệp đặt lại, biến, màu sắc, phông chữ, cỡ chữ, v.v.
Sass nhập tập tin
Giống như CSS, Sass cũng hỗ trợ lệnh @import .
Lệnh @import cho phép bạn đưa nội dung của tệp này vào tệp khác.
Lệnh CSS @import có một nhược điểm lớn do các vấn đề về hiệu suất; nó tạo thêm một yêu cầu HTTP mỗi lần bạn gọi nó. Tuy nhiên, lệnh Sass @import bao gồm tệp trong CSS; vì vậy không cần thêm lệnh gọi HTTP khi chạy!
Cú pháp nhập Sass:
@import filename ;
Mẹo: Bạn không cần chỉ định phần mở rộng tệp, Sass sẽ tự động giả định rằng bạn muốn nói đến tệp .sass hoặc .scss. Bạn cũng có thể nhập tệp CSS. Lệnh @import nhập tệp và mọi biến hoặc mixin được xác định trong tệp đã nhập sau đó có thể được sử dụng trong tệp chính.
Bạn có thể nhập bao nhiêu tệp tùy thích vào tệp chính:
Ví dụ
@import "variables";
@import
"colors";
@import
"reset";
Hãy xem một ví dụ: Giả sử chúng ta có một tệp đặt lại tên là "reset.scss", trông như thế này:
Ví dụ
Cú pháp SCSS (reset.scss):
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
và bây giờ chúng tôi muốn nhập tệp "reset.scss" vào một tệp khác có tên "standard.scss".
Đây là cách chúng tôi thực hiện: Việc thêm lệnh @import ở đầu tệp là điều bình thường; bằng cách này, nội dung của nó sẽ có phạm vi toàn cầu:
Cú pháp SCSS (tiêu chuẩn.scss):
@import "reset";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
Vì vậy, khi tệp "standard.css" được dịch mã, CSS sẽ trông như thế này:
Đầu ra CSS:
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
Sass một phần
Theo mặc định, Sass dịch trực tiếp tất cả các tệp .scss. Tuy nhiên, khi bạn muốn nhập một tệp, bạn không cần phải chuyển tệp trực tiếp.
Sass có cơ chế cho việc này: Nếu bạn bắt đầu tên tệp bằng dấu gạch dưới, Sass sẽ không dịch mã nó. Các tệp được đặt tên theo cách này được gọi là các phần trong Sass.
Vì vậy, một phần tệp Sass được đặt tên bằng dấu gạch dưới ở đầu:
Cú pháp một phần của Sass:
_ filename ;
Ví dụ sau đây hiển thị một phần tệp Sass có tên "_colors.scss". (Tệp này sẽ không được dịch trực tiếp sang "colors.css"):
Ví dụ
"_colors.scss":
$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;
Bây giờ, nếu bạn nhập một phần tệp, hãy bỏ dấu gạch dưới. Sass hiểu rằng nên nhập tệp "_colors.scss":
Ví dụ
@import "colors";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: $myBlue;
}
