Sass là ngôn ngữ biểu định kiểu, là bộ tiền xử lý cho CSS [Cascading Style Sheets]. Nó bổ sung các tính năng cho CSS như biến, quy tắc lồng nhau và mixin, có thể làm cho biểu định kiểu của bạn dễ bảo trì hơn và dễ viết hơn
@use so với @forward
Trong Sass, bạn có thể sử dụng chỉ thị @use
để nhập một mô-đun và các kiểu, biến và mixin liên quan của nó vào biểu định kiểu của bạn
Chỉ thị @use
cho phép bạn mô đun hóa biểu định kiểu của mình và giúp chúng dễ bảo trì hơn bằng cách chia nhỏ chúng thành các phần nhỏ hơn, có thể tái sử dụng
Mặt khác, chỉ thị
sass/
├── modules/
│ ├── _variables.scss
│ ├── _typography.scss
│ └── _button.scss
└── main.scss
1 cho phép bạn chuyển tiếp một khai báo hoặc tập hợp các khai báo sang một mô-đun khác, thay vì nhập toàn bộ mô-đunĐiều này có thể hữu ích nếu bạn chỉ cần sử dụng một phần nhỏ của mô-đun hoặc nếu bạn muốn tùy chỉnh các kiểu trong mô-đun bằng cách thêm hoặc ghi đè một số khai báo
Đây là một ví dụ về cách bạn có thể sử dụng các chỉ thị @use
và
sass/
├── modules/
│ ├── _variables.scss
│ ├── _typography.scss
│ └── _button.scss
└── main.scss
1 trong Sass// Define a module with some variables and mixins
@use 'variables' as *;
@mixin font-size[$size] {
font-size: $size;
}
// Import the module and use its variables and mixins
@use 'typography';
h1 {
@include font-size[48px];
}
// Forward a declaration to another module
@forward 'button';
button {
@extend .button;
}
@use vs @import
Trong Sass, bạn có thể sử dụng các chỉ thị @use
và
sass/
├── modules/
│ ├── _variables.scss
│ ├── _typography.scss
│ └── _button.scss
└── main.scss
5 để bao gồm các kiểu, biến và mixin từ các tệp hoặc mô-đun khác trong biểu định kiểu của bạnTuy nhiên, có một số điểm khác biệt chính giữa các chỉ thị này
- Chỉ thị
@use
là một tính năng mới hơn đã được giới thiệu trong Sass 3. 7. Nó cho phép bạn nhập một mô-đun và các kiểu, biến và mixin liên quan của nó vào biểu định kiểu của bạn. Bạn có thể sử dụng từ khóa
7 để chỉ định bí danh cho mô-đun đã nhập, có thể được sử dụng để truy cập các khai báo của nósass/ ├── modules/ │ ├── _variables.scss │ ├── _typography.scss │ └── _button.scss └── main.scss
- Chỉ thị
5 là cách truyền thống để bao gồm các kiểu, biến và mixin từ các tệp hoặc mô-đun khác trong Sass. Nó hoạt động tương tự như chỉ thịsass/ ├── modules/ │ ├── _variables.scss │ ├── _typography.scss │ └── _button.scss └── main.scss
@use
, nhưng không hỗ trợ từ khóa
7 và không cho phép bạn nhập các khai báo cụ thểsass/ ├── modules/ │ ├── _variables.scss │ ├── _typography.scss │ └── _button.scss └── main.scss
Nói chung, chỉ thị @use
là một cách mạnh mẽ và linh hoạt hơn để bao gồm các kiểu, biến và mixin từ các tệp hoặc mô-đun khác trong Sass
Nó cho phép bạn nhập các khai báo cụ thể và chỉ định bí danh cho mô-đun đã nhập, điều này có thể làm cho biểu định kiểu của bạn dễ bảo trì hơn và dễ đọc hơn
Mặt khác, chỉ thị
sass/
├── modules/
│ ├── _variables.scss
│ ├── _typography.scss
│ └── _button.scss
└── main.scss
5 là một cách đơn giản và quen thuộc hơn để bao gồm các kiểu, biến và mixin từ các tệp hoặc mô-đun khác trong SassNó có thể là một lựa chọn tốt nếu bạn đang làm việc trong một dự án không yêu cầu các tính năng nâng cao của chỉ thị @use
@use vs @forward vs @import trong Ví dụ về cấu trúc thư mục
Dưới đây là một ví dụ về cách bạn có thể sắp xếp các tệp Sass của mình và sử dụng các chỉ thị @use
,
sass/
├── modules/
│ ├── _variables.scss
│ ├── _typography.scss
│ └── _button.scss
└── main.scss
1 và sass/
├── modules/
│ ├── _variables.scss
│ ├── _typography.scss
│ └── _button.scss
└── main.scss
5 để mô đun hóa và sắp xếp các biểu định kiểu của bạnsass/
├── modules/
│ ├── _variables.scss
│ ├── _typography.scss
│ └── _button.scss
└── main.scss
Tệp
$primary-color: #333;
$secondary-color: #777;
@mixin font-size[$size] {
font-size: $size;
}
@mixin font-color[$color] {
color: $color;
}
7 có thể xác định một số biến toàn cục và mixin mà bạn muốn sử dụng xuyên suốt biểu định kiểu của mình$primary-color: #333;
$secondary-color: #777;
@mixin font-size[$size] {
font-size: $size;
}
@mixin font-color[$color] {
color: $color;
}
Tệp
$primary-color: #333;
$secondary-color: #777;
@mixin font-size[$size] {
font-size: $size;
}
@mixin font-color[$color] {
color: $color;
}
8 có thể sử dụng các biến và mixin được xác định trong tệp $primary-color: #333;
$secondary-color: #777;
@mixin font-size[$size] {
font-size: $size;
}
@mixin font-color[$color] {
color: $color;
}
7 để xác định một số kiểu và mixin cho văn bản kiểu dáng@use 'variables' as *;
h1 {
@include font-size[48px];
@include font-color[$primary-color];
}
h2 {
@include font-size[36px];
@include font-color[$secondary-color];
}
Tệp
@use 'variables' as *;
h1 {
@include font-size[48px];
@include font-color[$primary-color];
}
h2 {
@include font-size[36px];
@include font-color[$secondary-color];
}
0 có thể xác định một số kiểu và mixin cho các nút tạo kiểu.button {
background-color: $primary-color;
border: none;
color: #fff;
cursor: pointer;
font-size: 16px;
padding: 8px 16px;
}
Trong biểu định kiểu chính, bạn có thể sử dụng chỉ thị @use
để nhập các tệp
$primary-color: #333;
$secondary-color: #777;
@mixin font-size[$size] {
font-size: $size;
}
@mixin font-color[$color] {
color: $color;
}
7 và $primary-color: #333;
$secondary-color: #777;
@mixin font-size[$size] {
font-size: $size;
}
@mixin font-color[$color] {
color: $color;
}
8 và sử dụng các khai báo của chúng@use 'variables';
@use 'typography';
body {
background-color: $primary-color;
}
p {
@include font-size[16px];
}
Bạn cũng có thể sử dụng chỉ thị
sass/
├── modules/
│ ├── _variables.scss
│ ├── _typography.scss
│ └── _button.scss
└── main.scss
1 để chuyển tiếp một tờ khai tới tệp @use 'variables' as *;
h1 {
@include font-size[48px];
@include font-color[$primary-color];
}
h2 {
@include font-size[36px];
@include font-color[$secondary-color];
}
0@forward 'button';
button {
@extend .button;
}
Tôi hy vọng ví dụ này giúp làm rõ cách bạn có thể sử dụng các chỉ thị @use
,
sass/
├── modules/
│ ├── _variables.scss
│ ├── _typography.scss
│ └── _button.scss
└── main.scss
1 và sass/
├── modules/
│ ├── _variables.scss
│ ├── _typography.scss
│ └── _button.scss
└── main.scss
5 để mô đun hóa và sắp xếp các tệp Sass và biểu định kiểu của bạn. Hãy cho tôi biết nếu bạn có bất kì câu hỏi nào khác@import có bị phản đối không?
Không, quy tắc
sass/
├── modules/
│ ├── _variables.scss
│ ├── _typography.scss
│ └── _button.scss
└── main.scss
5 không bị phản đối trong CSS [Cascading Style Sheets]. Đây là một tính năng tiêu chuẩn của CSS cho phép bạn đưa các kiểu từ các biểu định kiểu khác vào tài liệu của mìnhQuy tắc
sass/
├── modules/
│ ├── _variables.scss
│ ├── _typography.scss
│ └── _button.scss
└── main.scss
5 có cú pháp như sau@import url|string|format;
Tham số
.button {
background-color: $primary-color;
border: none;
color: #fff;
cursor: pointer;
font-size: 16px;
padding: 8px 16px;
}
1 chỉ định vị trí của biểu định kiểu sẽ được nhập và có thể là một URL hoặc một đường dẫn tương đốiTham số
.button {
background-color: $primary-color;
border: none;
color: #fff;
cursor: pointer;
font-size: 16px;
padding: 8px 16px;
}
2 chỉ định nội dung của biểu định kiểu sẽ được nhập và tham số .button {
background-color: $primary-color;
border: none;
color: #fff;
cursor: pointer;
font-size: 16px;
padding: 8px 16px;
}
3 chỉ định định dạng của biểu định kiểuĐây là một ví dụ về cách bạn có thể sử dụng quy tắc
sass/
├── modules/
│ ├── _variables.scss
│ ├── _typography.scss
│ └── _button.scss
└── main.scss
5 trong CSS@import url['styles.css'];
@import url['print.css'] print;
@import 'custom.css';
Trong ví dụ này, quy tắc
sass/
├── modules/
│ ├── _variables.scss
│ ├── _typography.scss
│ └── _button.scss
└── main.scss
5 đầu tiên nhập tệp .button {
background-color: $primary-color;
border: none;
color: #fff;
cursor: pointer;
font-size: 16px;
padding: 8px 16px;
}
6, quy tắc sass/
├── modules/
│ ├── _variables.scss
│ ├── _typography.scss
│ └── _button.scss
└── main.scss
5 thứ hai nhập tệp .button {
background-color: $primary-color;
border: none;
color: #fff;
cursor: pointer;
font-size: 16px;
padding: 8px 16px;
}
8 và chỉ áp dụng tệp đó cho phương tiện in, còn quy tắc sass/
├── modules/
│ ├── _variables.scss
│ ├── _typography.scss
│ └── _button.scss
└── main.scss
5 thứ ba nhập nội dung của tệp @use 'variables';
@use 'typography';
body {
background-color: $primary-color;
}
p {
@include font-size[16px];
}
0