CSS變量是一種在整個(gè)CSS中重復(fù)使用的值的占位符。使用CSS變量可以使整個(gè)樣式表更加靈活和易于維護(hù)。

:root {
--main-color: #ff0000;
--secondary-color: #00ff00;
}
p {
color: var(--main-color);
border: 1px solid var(--secondary-color);
}

在這個(gè)例子中，我們定義了兩個(gè)CSS變量，--main-color和--secondary-color。我們可以在整個(gè)樣式表中使用它們。在這個(gè)例子中，我們?cè)趐標(biāo)簽中使用了它們。p標(biāo)簽的文本顏色將使用--main-color變量的值，而邊框顏色將使用--secondary-color變量的值。如果我們想更改這些顏色，我們只需要更改--main-color和--secondary-color的值，而不是每個(gè)使用這些顏色的元素的值。

另一個(gè)好處是，CSS變量可以動(dòng)態(tài)更改。我們可以使用JavaScript來(lái)更改它們的值。

document.documentElement.style.setProperty('--main-color', '#0000ff');

在這個(gè)例子中，我們使用JavaScript更改了--main-color的值為#0000ff。這個(gè)值將在整個(gè)樣式表中使用，而不僅僅是在給定元素上。這意味著我們可以在整個(gè)網(wǎng)站中更改顏色主題，只需更改CSS變量的值。