在編寫 CSS 樣式表時，我們經常需要定義變量用于存儲顏色、字體等屬性值。而在過去，我們可能會使用 Sass 或者 LESS 等預處理器來實現變量的使用，但現在我們可以直接在 CSS 中定義變量了。

CSS 中定義變量的語法如下：

:root {
--primary-color: #007bff;
}
.button {
background-color: var(--primary-color);
color: #fff;
}

在上面的例子中，我們使用:root選擇器定義了一個名為--primary-color的變量，并將其賦值為藍色。在.button樣式中，我們可以使用var()函數來引用這個變量，從而為按鈕設置背景顏色。

除了顏色之外，我們還可以使用變量來存儲字體、邊框、陰影等屬性的值。

使用 CSS 變量有以下優點：

• 更加靈活：與預處理器相比，使用 CSS 變量可以提供更多的靈活性，因為你可以在不同的地方定義和使用變量。
• 更加優雅：CSS 變量可以讓你的樣式表更加簡介、清晰，而不需要使用大量的變量定義。
• 更加可維護：當我們需要修改某個屬性的值時，只需要修改變量的值就可以了，這樣可以更加方便地維護樣式表。