Biến Sass
Biến Sass
Biến là một cách để lưu trữ thông tin mà bạn có thể sử dụng lại sau này.
Với Sass, bạn có thể lưu trữ thông tin dưới dạng các biến, như:
- dây
- con số
- màu sắc
- Boolean
- danh sách
- giá trị rỗng
Sass sử dụng ký hiệu $, theo sau là tên, để khai báo các biến:
Cú pháp biến Sass:
$ variablename : value ;
Ví dụ sau khai báo 4 biến có tên myFont, myColor, myFontSize và myWidth. Sau khi các biến được khai báo, bạn có thể sử dụng các biến ở bất cứ đâu bạn muốn:
Cú pháp SCSS:
$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
font-family: $myFont;
font-size: $myFontSize;
color: $myColor;
}
#container {
width: $myWidth;
}
Vì vậy, khi tệp Sass được dịch mã, nó sẽ lấy các biến (myFont, myColor, v.v.) và xuất ra CSS thông thường với các giá trị biến được đặt trong CSS, như sau:
Đầu ra CSS:
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
#container {
width: 680px;
}
Phạm vi biến Sass
Các biến Sass chỉ khả dụng ở cấp độ lồng nhau nơi chúng được xác định.
Hãy xem ví dụ sau:
Cú pháp SCSS:
$myColor: red;
h1 {
$myColor: green;
color: $myColor;
}
p {
color: $myColor;
}
Màu của văn bản bên trong thẻ <p>
sẽ là đỏ hay xanh lục? Nó sẽ có màu đỏ!
Định nghĩa khác, $myColor: green; nằm trong quy tắc <h1>
và sẽ chỉ khả dụng ở đó!
Vì vậy, đầu ra CSS sẽ là:
Đầu ra CSS:
h1 {
color: green;
}
p {
color: red;
}
Được rồi, đó là hành vi mặc định cho phạm vi thay đổi.
Sử dụng Sass !global
Hành vi mặc định cho phạm vi biến có thể được ghi đè bằng cách sử dụng khóa chuyển đổi !global
.
!global
chỉ ra rằng một biến là toàn cục, có nghĩa là nó có thể truy cập được ở mọi cấp độ.
Hãy xem ví dụ sau (tương tự như trên; nhưng có thêm !global
):
Cú pháp SCSS:
$myColor: red;
h1 {
$myColor: green !global;
color: $myColor;
}
p {
color: $myColor;
}
Bây giờ màu của văn bản bên trong thẻ <p>
sẽ có màu xanh lục!
Vì vậy, đầu ra CSS sẽ là:
Đầu ra CSS:
h1 {
color: green;
}
p {
color: green;
}
Mẹo: Biến toàn cục phải được xác định bên ngoài bất kỳ quy tắc nào. Sẽ là khôn ngoan nếu xác định tất cả các biến toàn cục trong tệp riêng của nó, có tên là "_globals.scss" và bao gồm tệp bằng từ khóa @include .