CSSVì custom property theo luật kế thừa của DOM, không phải biến toàn cục như SASS.
Khai báo --gap trên .card thì chỉ .card và con cháu của nó đọc được; anh em bên ngoài cây đó nhận var(--gap) là không hợp lệ.
css
.card { --gap: 12px; }
.card .row { gap: var(--gap); } /* 12px */
.footer { gap: var(--gap); } /* invalid: --gap not in scope */Muốn dùng chung thì khai báo ở tổ tiên chung, thường là :root (tức <html>).
Fallback var(--x, 8px) chạy khi biến không được định nghĩa trong scope đó. Hai điểm hay bị nhầm:
- Nếu biến có định nghĩa nhưng giá trị sai kiểu (vd
--gap: redgán vàogap), fallback không chạy. Khai báo thành invalid-at-computed-value-time và property nhận giá trị kế thừa hoặc initial. - Dấu phẩy đầu tiên phân tách fallback, phần còn lại tính là một giá trị:
var(--shadow, 0 0 4px rgba(0,0,0,.2))hợp lệ.
Đặc tính động là điểm mạnh so với SASS variable: có thể đổi tại runtime bằng JS (el.style.setProperty('--gap', '20px')) hoặc theo media query, và giá trị mới lan xuống toàn bộ nhánh con.