CSS自定義變量屬性是CSS3的新特性，它有助于生成可重用的CSS代碼，并節(jié)省時間和代碼。 在此之前，開發(fā)人員通常使用CSS預(yù)處理器來使用變量，但是CSS自定義變量為CSS添加了一個原生解決方案。

:root {
--color-primary: #007bff;
--color-secondary: #6c757d;
--font-size-normal: 1rem;
--font-size-large: 1.3rem;
}

在這個例子里，我們定義了四個變量。 第一個變量是 --color-primary，它表示主色調(diào)，二號變量是 --color-secondary， 它代表次要色調(diào)。最后兩個是字體大小：
--font-size-normal 和 --font-size-large。 變量的默認(rèn)值需要用 :root 定義在選擇器中。

.primary-button {
background-color: var(--color-primary);
font-size: var(--font-size-normal);
}
.secondary-button {
background-color: var(--color-secondary);
font-size: var(--font-size-large);
}

在這個例子里，我們用自定義變量屬性給兩個按鈕類添加了樣式。.primary-button使用--color-primary定義的背景顏色，他還使用fontsize:normal定義的字體大小。 .secondary-button 通過-- font-size-large定義的常規(guī)字體大小 和--color-secondary定義的次要色調(diào)改變了字體和背景顏色。

好處是我們現(xiàn)在可以定義變量并隨意使用它們， 比如打算更改主色調(diào)，只需要更改--color-primary一次，然后所有使用--color-primary的地方都會隨之更改。