CSS 變量是 CSS 的一項新特性，也稱為自定義屬性。它們允許在 CSS 樣式表中將值賦給一個變量，并在整個樣式表中重復使用。這提供了一個更好的方法來管理重復的值，從而使樣式表更容易維護。
:root {
--primary-color: #007fff;
--secondary-color: #f5f5f5;
}
h1 {
color: var(--primary-color);
}
body {
background-color: var(--secondary-color);
}在上面的示例中，我們定義了兩個 CSS 變量：主要顏色和次要顏色。我們可以在整個樣式表中使用這些變量，并且只需更改這些變量的值一次，就會更新整個樣式表的顏色。
您可能會發現，我們在定義變量時使用了:root選擇器。:root是 CSS 中的偽類選擇器，可以選擇文檔樹的根元素。在 HTML 中，根元素為<html>元素。
通過將變量定義在:root中，我們可以使它們在整個文檔中全局可用。在h1和body中，我們使用變量的方式是通過var()函數。
CSS 變量可以傳遞參數，具有備選方案并可以被計算在內。CSS 變量是一個強大和靈活的工具，在設計中越來越常用。