CSS Biến

CSS Biến

Hàm var() được sử dụng để chèn giá trị của biến CSS.

Biến CSS có thể truy cập DOM, điều này có nghĩa là bạn có thể tạo biến có phạm vi cục bộ hoặc toàn cục, sử dụng JavaScript để thay đổi biến, và thay đổi biến dựa trên điều kiện tìm kiếm.

Một cách tốt để sử dụng biến CSS liên quan đến màu sắc thiết kế. Bạn có thể đặt chúng trong biến mà không cần sao chép và dán lại màu sắc nhiều lần.

Cách truyền thống

Dưới đây là ví dụ minh họa cách định nghĩa một số màu truyền thống trong bảng樣 (bằng cách định nghĩa màu cần sử dụng cho mỗi phần tử cụ thể):

thực例

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

Thử Nghiệm Thực Tế

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)
Giá trị Mô Tả
name Bắt buộc. Tên biến (bắt đầu bằng hai dấu gạch dưới).
value Tùy chọn. Giá trị mặc định (sử dụng khi biến không được tìm thấy).

Chú thích:Tên biến phải bắt đầu bằng hai dấu gạch dưới (--), và phân biệt chữ hoa/thường!

Cách hoạt động của var()

Trước hết: CSS biến có thể có phạm vi toàn cục hoặc cục bộ.

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 biến cục bộ chỉ có thể được sử dụng trong chọn lọc khai báo biến.

Nếu muốn tạo biến có phạm vi toàn cục, hãy khai báo nó trong chọn lọc :root. Chọn lọc :root khớp với phần gốc của tài liệu.

Nếu muốn tạo biến có phạm vi cục bộ, hãy khai báo nó trong chọn lọc sẽ sử dụng biến đó.

Dưới đây là ví dụ tương tự như ví dụ trên nhưng ở đây chúng ta sử dụng hàm var().

Trước hết, 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ị biến vào bảng样 sau:

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

Thử Nghiệm Thực Tế

Sử dụng var() có những lợi thế sau:

  • Giúp mã dễ đọc hơn (dễ hiểu hơn)
  • Giúp dễ dàng hơn trong việc thay đổi giá trị màu sắc

Nếu muốn thay đổi màu xanh và trắng bằng màu xanh và trắng nhẹ hơn, bạn chỉ cần thay đổi hai giá trị biến:

thực例

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

Thử Nghiệm Thực Tế

Hỗ Trợ Trình Duyệt

Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Hàm
var() 49.0 15.0 31.0 9.1 36.0

Hàm CSS var()

Hàm Mô Tả
var() Chèn Giá Trị Biến CSS