Biến CSS - Hàm var()
Biến CSS
Hàm var()
được sử dụng để chèn giá trị của 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 có phạm vi cục bộ hoặc toàn cục, thay đổi các biến bằng JavaScript và thay đổi các biến dựa trên truy vấn phương tiện.
Một cách hay để sử dụng các biến CSS là khi nói đến màu sắc trong thiết kế của bạn. Thay vì sao chép và dán đi dán lại các màu giống nhau, bạn có thể đặt chúng vào các biến.
Cách 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 màu sẽ sử dụng cho từng thành phần cụ thể):
Ví 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;
}
Hãy tự mình thử »Cú pháp của hàm var()
Hàm var()
được sử dụng để chèn giá trị của biến CSS.
Cú pháp của hàm var()
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à phân biệt chữ hoa chữ thường!
Cách thức hoạt động của var()
Trước hết: 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 trong 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 có phạm vi toàn cục, hãy khai báo nó bên trong bộ chọn :root
. Bộ chọn :root
khớp với phần tử gốc của tài liệu.
Để tạo một biến có phạm vi cục bộ, hãy khai báo biến đó bên trong bộ chọn sẽ sử dụng biến đó.
Ví dụ sau cũng giống ví dụ trên nhưng ở đây chúng ta sử dụng hàm var()
.
Đầ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 hàm var()
để chèn giá trị của các biến sau vào style sheet:
Ví 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;
}
Hãy tự mình thử »Ư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)
- làm cho việc thay đổi giá trị màu dễ dàng hơn nhiều
Để thay đổi màu xanh và trắng thành xanh và trắng dịu hơn, bạn chỉ cần thay đổi hai giá trị biến:
Ví 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ãy tự mình thử »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 đủ hàm var()
.
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 |