CSS 是一種很有用的編程語言，它可以讓我們輕松地控制網頁的樣式和布局。其中，控制變量也是 CSS 最為強大的功能之一。在本文中，我們將探討如何使用 CSS 來控制變量。
首先，我們需要了解 CSS 變量的概念。CSS 變量是一種可以被反復使用并且可控的值。相對于硬編碼的值，使用 CSS 變量可以使樣式更加靈活。在 CSS 中，我們可以使用 var() 函數來引用一個 CSS 變量。下面是一個使用 CSS 變量的例子：
pre {
--primary-color: #f00;
}
p {
color: var(--primary-color);
}
在上面的代碼中，我們使用了定義變量的語法：變量名以 "--" 開頭，后面跟著變量的值。我們定義了一個名為 "--primary-color" 的變量，并且給它賦值為紅色。接著，在段落的樣式中，我們使用了 var() 函數來引用這個變量，使文字變成了紅色。
除了在樣式中使用定義好的變量，我們還可以通過 JavaScript 動態地設置和修改 CSS 變量。下面是一個通過 JavaScript 設置變量的例子：
const root = document.documentElement;
root.style.setProperty('--primary-color', '#0f0');
在上面的代碼中，我們獲取了文檔的根元素，并且調用了 setProperty() 方法來設置 "--primary-color" 變量的值為綠色。
總結起來，CSS 變量是一種可以被反復使用并且可控的值。通過定義和引用變量，我們可以輕松地控制網頁的樣式和布局。在實際使用中，我們可以使用 JavaScript 通過動態設置和修改變量的值來達到更好的效果。