Giới thiệu ngắn gọn về các biến CSS (Thuộc tính tùy chỉnh)

Các biến trong CSS thuần túy không có bộ xử lý trước thuộc bất kỳ loại nào đều có sẵn trong hầu hết các trình duyệt hiện đại ngày nay. Chúng chính thức được gọi là thuộc tính tùy chỉnh và cho phép tránh nhiều sự lặp lại liên quan đến CSS truyền thống và trái ngược với các biến có bộ tiền xử lý, chúng có thể được thay đổi động.

Đây là cách sử dụng thuộc tính tùy chỉnh:

/* Declaration */
some-element {
  --my-bg-color: #F9EC31;
}

/* Using it */
some-element {
  background-color: var(--my-bg-color);
}

Bạn cũng có thể cung cấp giá trị dự phòng khi sử dụng một biến, giá trị này sẽ được sử dụng nếu biến chưa được xác định:

some-element {
  background-color: var(--my-bg-color, papayawhip);
}

:nguồn root

Một trường hợp sử dụng phổ biến là xác định các biến trong: root pseudo-class và sau đó sử dụng nó ở bất cứ đâu cần giá trị:

:root {
  --funky-shadow: 3px 3px 10px brown;
}

.ugly-box {
  box-shadow: var(--funky-shadow);
}

Calc ()

Bạn cũng có thể sử dụng calc () trên các giá trị biến:

:root {
  --special-padding: 1.5em;
}

.pandora-box {
  padding-bottom: calc(var(--special-padding) + 1em);
}

Hỗ trợ trình duyệt

👉 Myth là một lựa chọn tốt để bắt đầu sử dụng các biến CSS ngay hôm nay.

Tôi có thể sử dụng biến css không? Dữ liệu về hỗ trợ cho tính năng biến css trên các trình duyệt chính từ caniuse.com.

span.hljs-number {color: initial; }

Tags:

Các tin liên quan

Phát hiện tính năng trong CSS với @supports
2016-05-05
Bộ chọn thuộc tính CSS
2016-02-05
Hàm calc () CSS
2015-10-08
Cách sử dụng Bộ tiền xử lý CSS LESS trên VPS Ubuntu
2014-01-27