純CSS定義變量 在CSS中定義變量可以幫助我們在整個樣式表中維護一致性，提高代碼的可重用性和可維護性，減少樣式出錯的可能性。在CSS3中，定義變量的功能得到了進一步增強。 定義變量 在CSS中定義變量需要使用var(--variable-name)的語法，其中variable-name指變量的名稱。我們可以在:root選擇器中定義全局變量：

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

這里我們定義了一個primary-color變量，其值為藍色（#007bff）。在其他樣式中，我們可以用var()函數引用這個變量：

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

這里我們給所有h1元素設置了顏色為primary-color定義的值。 其他選擇器中定義變量 除了在:root選擇器中定義全局變量，我們也可以在其他選擇器中定義局部變量：

.btn {
--bg-color: #e7e7e7;
background-color: var(--bg-color);
/* 其他樣式 */
}

這里我們給.btn元素定義了一個局部變量--bg-color，用于設置元素的背景色。由于該變量只針對.btn元素生效，而不影響其他元素，所以這是一個局部變量。 變量的繼承 CSS中變量的值可以被繼承。這意味著我們可以定義一個變量，然后在子元素中使用它，而不必在每個子元素中重新定義：

:root {
--primary-color: #007bff;
}
.btn {
color: var(--primary-color);
}
.btn:hover {
color: red;
}
.btn:focus {
color: var(--primary-color);
}

在這里，我們定義了一個全局變量--primary-color，并在.btn元素中調用它。.btn:hover當鼠標懸停在元素上時，會將顏色修改為紅色，而.btn:focus再次使用了--primary-color變量。 總結 在CSS中定義變量可以提高樣式代碼的可維護性和可重用性，避免了樣式的復制和粘貼。使用:root選擇器定義全局變量，使用局部變量可以在其他選擇器中定義。變量的值可以被繼承，使產生更少的代碼。