CSS Cover Variable

Đổi biến toàn cục bằng biến cục bộ

Từ trang trước, chúng ta biết rằng có thể truy cập/sử dụng biến toàn cục trong toàn bộ tài liệu, trong khi biến cục bộ chỉ có thể sử dụng trong chọn lọc khai báo nó.

Xin xem ví dụ trên trang trước:

thực例

: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;
}

Try It Yourself

Đôi khi, chúng ta muốn biến chỉ thay đổi trong phần đặc định của trang.

Giả sử chúng ta muốn phần tử button sử dụng màu xanh khác. Thì, chúng ta có thể khai báo lại biến --blue trong chọn lọc button. Khi chúng ta sử dụng var(--blue) trong chọn lọc này, nó sẽ sử dụng giá trị biến --blue cục bộ tại đây.

Chúng ta thấy biến cục bộ --blue sẽ che phủ biến --blue toàn cục của phần tử button:

thực例

: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;
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Try It Yourself

Thêm một biến cục bộ mới

Nếu chỉ sử dụng một biến trong một nơi, chúng ta cũng có thể khai báo một biến cục bộ mới, giống như thế này:

thực例

: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;
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px solid var(--button-blue);
  padding: 5px;
}

Try It Yourself

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Function
var() 49.0 15.0 31.0 9.1 36.0

CSS var() Function

Function Description
var() Insert the value of the CSS variable.