CSS變量是CSS3中引入的一項新特性，也稱為自定義屬性。它可以使開發者在CSS中定義可重用的值，用于在不同的樣式規則中進行調用。CSS變量使用“--”作為前綴來聲明變量名稱。

:root {
--primary-color: #02B3E4;
--secondary-color: #FCD429;
}

在上面的例子中，我們使用:root偽類來定義全局變量（在文檔中，:root表示HTML文檔的根元素）。我們定義了兩個變量，一個是主要顏色，另一個是次要顏色。在下面的代碼中，我們可以使用這些變量：

button {
background-color: var(--primary-color);
color: var(--secondary-color);
}

在使用CSS變量時，我們只需要在變量前加上“var”即可。這使我們可以輕松地更改整個站點或應用程序的外觀和感覺。此外，我們可以通過使用JavaScript直接操作CSS變量來更改它們。例如：

document.querySelector(':root').style.setProperty('--primary-color', '#D95952');

使用CSS變量時，我們需要注意變量的作用域。無法在CSS選擇器內定義變量，因為它們需要全局范圍。此外，不能在普通CSS屬性中使用變量名稱，例如：

/* 這將無效 */
border: var(--border-width) solid black;

最后，雖然CSS變量不是所有瀏覽器都支持的標準，但我們可以使用CSS后備工具，例如Less或Sass等預處理器，來實現類似的功能。