Biến Sass

Biến Sass

Biến là cách lưu trữ thông tin mà bạn có thể sử dụng lại sau này.

Bằng Sass, bạn có thểthông tinđược lưu trữ trong biến, ví dụ:

• chuỗi
• số
• màu sắc
• boolean
• danh sách
• null

Sass sử dụng ký hiệu $ kèm theo tên để khai báo biến:

Cú pháp biến Sass:

$variablename: value;

Ví dụ dưới đây đã khai báo 4 biến:

• myFont
• myColor
• myFontSize
• myWidth

Sau khi khai báo biến, bạn có thể sử dụng chúng ở bất kỳ vị trí nào:

Ngữ pháp SCSS:

$myFont: Helvetica, sans-serif;
$myColor: đỏ;
$myFontSize: 18px;
$myWidth: 680px;
body {
  font-family: $myFont;
  font-size: $myFontSize;
  màu: $myColor;
}
#container {
  width: $myWidth;
}

Do đó, khi tệp Sass được dịch, nó sẽ sử dụng các biến (myFont, myColor v.v.) và xuất ra CSS thông thường và đặt giá trị biến trong CSS, như sau:

Đầu ra CSS:

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  màu: đỏ;
}
#container {
  width: 680px;
}

Phạm vi biến Sass

Các biến Sass chỉ có thể được sử dụng trong cấp độ nhúng của chúng.

Xin hãy xem ví dụ bên dưới:

Ngữ pháp SCSS:

$myColor: đỏ;
h1 {
  $myColor: xanh lá cây;
  màu: $myColor;
}
p {
  màu: $myColor;
}

<p> Màu văn bản trong thẻ sẽ là đỏ hay xanh lá cây? Đó là đỏ!

Một định nghĩa khác, $myColor: xanh lá cây; nằm ở <h1> trong quy tắc và chỉ có thể sử dụng ở đó!

Vậy, đầu ra CSS sẽ là:

Đầu ra CSS:

h1 {
  màu: xanh lá cây;
}
p {
  màu: đỏ;
}

Tuyệt vời, đây là hành vi mặc định của phạm vi biến.

Sử dụng Sass !global

Có thể sử dụng !global Chuyển đổi hành vi mặc định của phạm vi biến.

!global cho thấy biến là toàn cục, điều này có nghĩa là nó có thể được truy cập ở mọi cấp độ.

Xin xem ví dụ dưới đây (cùng với trên, nhưng thêm !global）：

Ngữ pháp SCSS:

$myColor: đỏ;
h1 {
  $myColor: xanh lá cây !global;
  màu: $myColor;
}
p {
  màu: $myColor;
}

Bây giờ <p> Màu văn bản trong thẻ sẽ là xanh lá cây!

Vậy, đầu ra CSS sẽ là:

Đầu ra CSS:

h1 {
  màu: xanh lá cây;
}
p {
  màu: xanh lá cây;
}

Lưu ý:Nên định nghĩa biến toàn cục bên ngoài bất kỳ quy tắc nào. Cách làm thông minh là định nghĩa tất cả các biến toàn cục trong tệp của riêng mình, có tên là "_globals.scss", và sử dụng @include Từ khóa bao gồm tệp này.