在CSS中，我們可以使用css()屬性來(lái)改變HTML元素的樣式。而使用變量在css()屬性中進(jìn)行樣式改變，則是一種更加高效的方法。

/* 聲明變量 */
:root {
--main-color: #007bff;
}
/* 使用變量 */
.example {
color: var(--main-color);
background-color: var(--main-color);
}

在上面的代碼中，我們通過(guò)在:root偽類(lèi)中聲明變量--main-color，然后在CSS選擇器中使用var()函數(shù)來(lái)引用該變量。這意味著在整個(gè)CSS中，我們只需要更改變量的值，就可以同時(shí)修改所有引用該變量的樣式。

此外，我們還可以使用calc()函數(shù)和變量組合來(lái)進(jìn)行更加復(fù)雜的樣式計(jì)算。下面是一個(gè)簡(jiǎn)單的例子：

/* 聲明變量 */
:root {
--main-width: 200px;
}
/* 使用變量和calc()函數(shù) */
.example {
width: calc(var(--main-width) * 2);
}

在這個(gè)例子中，我們使用calc()函數(shù)來(lái)將變量值乘以2，然后將結(jié)果應(yīng)用到元素的寬度上。這種方式使得我們可以更加靈活地進(jìn)行樣式計(jì)算，而不用在CSS中寫(xiě)死所有值。