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

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

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

此外，我們還可以使用calc()函數和變量組合來進行更加復雜的樣式計算。下面是一個簡單的例子：

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

在這個例子中，我們使用calc()函數來將變量值乘以2，然后將結果應用到元素的寬度上。這種方式使得我們可以更加靈活地進行樣式計算，而不用在CSS中寫死所有值。