CSS變量是CSS3新增的特性之一，它可以讓我們定義全局變量，方便我們?cè)谡麄€(gè)CSS文件中重復(fù)使用。使用變量可以讓我們的CSS代碼更加簡(jiǎn)潔明了。

要定義一個(gè)CSS變量，需要使用var-前綴，例如：

:root {
--primary-color: #ff0000;
}

這里我們定義了一個(gè)名為primary-color的變量，值為#ff0000。使用:root是為了將變量定義在全局作用域中。

在使用變量時(shí)，只需要使用var()函數(shù)即可。例如：

p {
color: var(--primary-color);
}

這里我們將p元素的文字顏色設(shè)置為primary-color變量的值，也就是#ff0000。

當(dāng)然，CSS變量也支持繼承和重寫，所以我們可以在子元素中重定義同名變量：

.container {
--primary-color: #0000ff;
}
p {
color: var(--primary-color);
}

這樣，在.container元素內(nèi)部的p元素將會(huì)使用新的primary-color變量值，也就是#0000ff。

CSS變量的另一個(gè)有用之處是可以通過JavaScript動(dòng)態(tài)修改它們的值。例如：

```javascript document.documentElement.style.setProperty('--primary-color', '#00ff00'); ```

這樣就可以將primary-color變量的值修改為#00ff00。

總之，CSS變量是我們開發(fā)中必不可少的一個(gè)功能，能夠使得CSS代碼更簡(jiǎn)潔高效，同時(shí)使得我們的視覺設(shè)計(jì)更加靈活多變。