Biến ghi đè CSS
Ghi đè biến toàn cục bằng biến cục bộ
Ở trang trước, chúng ta đã biết rằng 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.
Hãy xem ví dụ ở trang trước:
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ử »Đôi khi chúng ta muốn các biến chỉ thay đổi trong một phần cụ thể của trang.
Giả sử chúng ta muốn có màu xanh lam khác cho các thành phần nút. Sau đó, chúng ta có thể khai báo lại biến --blue bên trong bộ chọn nút. Khi chúng ta sử dụng var(--blue) bên trong bộ chọn này, nó sẽ sử dụng giá trị biến --blue cục bộ được khai báo ở đây.
Chúng tôi thấy rằng biến --blue cục bộ sẽ ghi đè biến --blue toàn cục cho các thành phần nút:
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 {
--blue: #0000ff; /* local variable will
override global */
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
Hãy tự mình thử » Thêm một biến cục bộ mới
Nếu một biến chỉ được sử dụng ở một nơi duy nhất, chúng ta cũng có thể khai báo một biến cục bộ mới, như sau:
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 {
--button-blue: #0000ff; /* new local
variable */
background-color: var(--white);
color: var(--button-blue);
border: 1px solid var(--button-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 |