Biến CSS - Hàm var ()
Biến CSS
Hàm var()được sử dụng để chèn giá trị của một biến CSS.
Các biến CSS có quyền truy cập vào DOM, có nghĩa là bạn có thể tạo các biến với phạm vi cục bộ hoặc toàn cầu, thay đổi các biến bằng JavaScript và thay đổi các biến dựa trên các truy vấn phương tiện.
Một cách tốt để sử dụng các biến CSS là khi nói đến màu sắc của thiết kế của bạn. Thay vì sao chép và dán các màu giống nhau lặp đi lặp lại, bạn có thể đặt chúng vào các biến.
Con đường truyền thống
Ví dụ sau đây cho thấy cách truyền thống để xác định một số màu trong biểu định kiểu (bằng cách xác định các màu sẽ sử dụng, cho từng phần tử cụ thể):
Thí dụ
body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
color:
#1e90ff;
background-color: #ffffff;
padding: 15px;
}
button {
background-color: #ffffff;
color: #1e90ff;
border: 1px
solid #1e90ff;
padding: 5px;
}
Cú pháp của hàm var ()
Hàm var()được sử dụng để chèn giá trị của một biến CSS.
Cú pháp của var()hàm như sau:
var(--name, value)
| Value | Description |
|---|---|
| name | Required. The variable name (must start with two dashes) |
| value | Optional. The fallback value (used if the variable is not found) |
Lưu ý: Tên biến phải bắt đầu bằng hai dấu gạch ngang (-) và nó có phân biệt chữ hoa chữ thường!
Cách hoạt động của var ()
Trước hết: Các biến CSS có thể có phạm vi toàn cục hoặc cục bộ.
Các biến toàn cục có thể được truy cập / sử dụng thông qua toàn bộ tài liệu, trong khi các biến cục bộ chỉ có thể được sử dụng bên trong bộ chọn nơi nó được khai báo.
Để tạo một biến với phạm vi toàn cục, hãy khai báo nó bên trong :root
bộ chọn. Bộ :rootchọn khớp với phần tử gốc của tài liệu.
Để tạo một biến với phạm vi cục bộ, hãy khai báo nó bên trong bộ chọn sẽ sử dụng nó.
Ví dụ sau bằng với ví dụ trên, nhưng ở đây chúng ta sử dụng var()hàm.
Đầu tiên, chúng ta khai báo hai biến toàn cục (--blue và --white). Sau đó, chúng ta sử dụng
var()hàm để chèn giá trị của các biến sau này vào style sheet:
Thí dụ
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
Ưu điểm của việc sử dụng var () là:
- làm cho mã dễ đọc hơn (dễ hiểu hơn)
- giúp thay đổi các giá trị màu dễ dàng hơn nhiều
Để thay đổi màu xanh lam và trắng thành màu xanh lam và trắng nhẹ nhàng hơn, bạn chỉ cần thay đổi hai giá trị biến:
Thí dụ
:root {
--blue: #6495ed;
--white: #faf0e6;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ
var()chức năng.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
Hàm CSS var ()
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |