CSS 中的變量，又稱為自定義屬性，可以幫助我們在代碼中簡化重復(fù)的操作，從而提高開發(fā)效率。與 JavaScript 中的變量不同，CSS 變量的作用域僅限于它所在的選擇器以及該選擇器下的元素。 定義變量需要使用 `--` 前綴，例如：

:root {
--primary-color: #007bff;
}

這里的 `:root` 表示根元素，也就是 `html` 元素。`--primary-color` 是我們定義的變量名，后面跟隨著該變量的值 `#007bff`，表示主色調(diào)。在 HTML 代碼中，我們可以通過 `var()` 函數(shù)來使用該變量：

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

在這個例子中，我們將 `color` 屬性的值設(shè)置為 `var(--primary-color)`，表示該屬性的顏色值取決于 `--primary-color` 變量的值。如果我們需要修改主色調(diào)，只需要在 `:root` 中修改 `--primary-color` 的值即可。 值得注意的是，CSS 中的變量不具備計算能力。如果我們想在變量中進(jìn)行算術(shù)運(yùn)算，需要使用 calc() 函數(shù)。例如：

:root {
--margin: 16px;
}
.box {
margin-top: calc(var(--margin) * 2);
}

這里我們定義了一個 `--margin` 變量，表示元素的外邊距大小。在 `.box` 中，我們將 `margin-top` 屬性的值設(shè)置為 `calc(var(--margin) * 2)`，表示該值等于 `--margin` 變量的值乘以 2。 除了數(shù)值類型之外，CSS 中的變量還可以存儲任何類型的值，包括字符串、顏色值、漸變等。我們可以將變量作為參數(shù)傳遞給各種函數(shù)，例如 `rgba()`、`linear-gradient()` 等。 總之，CSS 中的變量為我們提供了更強(qiáng)大的樣式控制能力，幫助我們編寫更加可維護(hù)和可復(fù)用的代碼。它使得樣式一旦定義就可以重復(fù)使用，方便項(xiàng)目的維護(hù)。同時，由于 CSS 變量在各個選擇器之間是獨(dú)立的，因此我們可以將其應(yīng)用于不同的場景，使得我們的樣式更具擴(kuò)展性和靈活性。