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

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

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

另一個好處是，CSS變量可以動態更改。我們可以使用JavaScript來更改它們的值。

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

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