Sass @import và Partial

Sass có thể giữ mã CSS dry (DRY，Don't Repeat Yourself，không lặp lại chính mình).

Một cách để viết mã DRY là lưu trữ mã liên quan trong các tệp riêng biệt.

Bạn có thể sử dụng các đoạn CSS để tạo các tệp nhỏ và bao gồm chúng trong các tệp Sass khác. Ví dụ, các tệp này có thể là: tệp reset, biến, màu sắc, font chữ, v.v.

Nhập tệp Sass

Như CSS, Sass cũng hỗ trợ @import Câu lệnh.

@import Câu lệnh cho phép bạn bao gồm nội dung của một tệp trong tệp khác.

Do vấn đề hiệu suất, CSS @import Câu lệnh có một nhược điểm chính: mỗi khi gọi nó, sẽ tạo ra một HTTP yêu cầu bổ sung. @import Câu lệnh sẽ bao gồm tệp trong CSS; vì vậy không cần thêm HTTP gọi thêm khi chạy!

Ngữ pháp nhập Sass:

@import tên_tệp;

Lưu ý:Bạn không cần phải chỉ định phần mở rộng tệp, Sass sẽ tự động giả định bạn đang đề cập đến tệp .sass hoặc .scss. Bạn cũng có thể nhập tệp CSS.@import Câu lệnh nhập tệp, sau đó bạn có thể sử dụng bất kỳ biến hoặc mixin nào được định nghĩa trong tệp nhập trong tệp chính.

Bạn có thể nhập bất kỳ số lượng tệp nào trong tệp chính:

mô hình

@import "variables";
@import "colors";
@import "reset";

Hãy xem một ví dụ: giả sử chúng tôi có một tệp reset.scss với nội dung như sau:

Ngữ pháp SCSS (reset.scss):

html,
body,
ul,
ol {
  canh: 0;
  keo: 0;
}

Hiện tại chúng tôi sẽ nhập tệp "reset.scss" vào tệp khác có tên là "standard.scss".

Chúng tôi làm như sau: thường thì chúng tôi thêm ở đầu tệp. @import Câu lệnh; nội dung của nó sẽ có phạm vi toàn cục:

Ngữ pháp SCSS (standard.scss):

@import "reset";
thân {
  công thức chữ: Helvetica, sans-serif;
  cỡ chữ: 18px;
  màu: đỏ;
}

Do đó, khi tệp "standard.css" được dịch mã, CSS sẽ như sau:

CSS đầu ra:

html, body, ul, ol {
  canh: 0;
  keo: 0;
}
thân {
  công thức chữ: Helvetica, sans-serif;
  cỡ chữ: 18px;
  màu: đỏ;
}

Sass Partials (tệp phần)

Mặc định, Sass sẽ trực tiếp dịch mã tất cả các tệp .scss. Nhưng khi nhập tệp, bạn không cần tệp được dịch trực tiếp.

Sass có một cơ chế: 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 nó. Các tệp được đặt tên này trong Sass được gọi là partials.

Do đó, tệp partial Sass được đặt tên bằng dấu gạch dưới trước tên:

Ngữ pháp Sass Partial:

_tên tệp;

Dưới đây là ví dụ về tệp partial Sass có tên "_colors.scss". (Tệp này sẽ không được chuyển đổi trực tiếp thành "colors.css"):

mô hình

"_colors.scss":

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

Hiện tại, nếu bạn导入 tệp partial này, hãy bỏ qua dấu gạch dưới. Sass hiểu rằng nó nên导入 tệp "_colors.scss":

mô hình

@import "colors";
thân {
  công thức chữ: Helvetica, sans-serif;
  cỡ chữ: 18px;
  màu: $myBlue;
}