CSS 變量是定義在 :root 偽類下，可以用來存儲和重復使用 CSS 值的標簽。它們采用 var() 函數進行調用，來使代碼更加簡潔和易于維護。 下面是一個示例，展示如何定義 CSS 變量：

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

在上述代碼中，定義了三個 CSS 變量，用于存儲顏色和字體大小。它們的名稱由兩個連字號“--”開頭，后面跟著變量名。在這個例子中，第一個變量名是“primary-color”，它的值是一個藍色。第二個變量名是“secondary-color”，它的值是一個灰色。最后一個變量名是“font-size”，它的值是“1rem”，也就是瀏覽器默認字體大小。 在使用這些變量時，可以使用 var() 函數。例如，要將文本設置為使用“primary-color”變量定義的顏色，可以這樣寫：

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

上述代碼中，將 CSS 變量 var() 函數嵌入到 color 屬性中。這將使文本顯示為藍色，因為“primary-color”變量被定義為#007bff。 此外，還可以通過 JavaScript 動態更改 CSS 變量的值，以實現動態樣式更改。 總之，CSS 變量是一種有用的工具，可以幫助我們更好地維護代碼，減少了繁瑣的樣式代碼，并使網頁更加動態和易于維護。