CSS變量在最新的CSS標(biāo)準(zhǔn)中被引入，可以方便地為多個(gè)元素設(shè)置相同的值或者在不同的規(guī)則中共用不同的值。使用CSS變量可以避免在代碼中出現(xiàn)冗長(zhǎng)、重復(fù)的樣式定義，讓樣式更加清晰易讀。
:root {
--color-primary: #007bff;
}
.btn-primary {
background-color: var(--color-primary);
}在這個(gè)例子中，我們使用:root偽類來聲明CSS變量--color-primary，并賦值為#007bff。接著，我們?cè)?code>.btn-primary類中使用var()函數(shù)來引用這個(gè)變量，使得按鈕的背景色與變量的值一致。
CSS變量可以在子元素中繼承，也可以在類似于media queries、hover等狀態(tài)中使用。如果你需要在一個(gè)元素內(nèi)使用多個(gè)變量，可以像下面這樣同時(shí)聲明多個(gè)：
:root {
--color-primary: #007bff;
--color-secondary: #6c757d;
}
.btn-primary {
background-color: var(--color-primary);
color: var(--color-secondary);
}值得注意的是，CSS變量支持動(dòng)態(tài)變化，可以借助JavaScript在運(yùn)行時(shí)修改變量的值。你可以在JavaScript中選中元素，使用setProperty方法來改變變量的值。
const root = document.documentElement;
root.style.setProperty('--color-primary', '#ff0000');這個(gè)例子中，我們選中了<html>元素，使用setProperty方法將--color-primary的值修改為#ff0000，從而改變了整個(gè)頁面的主題色。