在CSS中使用JavaScript變量可以讓我們更加靈活地控制樣式。在CSS3的眾多新特性中，變量便是其中之一，我們可以將常見的樣式屬性或者直接量賦值給一個變量，使用變量的方式去引用這些屬性或者量。

:root {
--primary-color: #FF0000;
}
p {
color: var(--primary-color);
}

這里我們通過:root偽類定義了一個變量–primary-color，然后在p標(biāo)簽中使用變量var()的方式來引用它，并將變量的值賦給了顏色屬性，從而使p標(biāo)簽的文字變成了紅色。

接下來我們可以使用JavaScript去動態(tài)地修改變量的值，進(jìn)而控制樣式的變化。

let root = document.documentElement; // 獲取根元素
let btn = document.querySelector('button');
btn.addEventListener('click', function() {
root.style.setProperty('--primary-color', '#00FF00');
});

我們首先獲取了根元素，并通過根元素的style.setProperty()方法設(shè)置了變量–primary-color的值為'#00FF00'，然后將這個操作綁定給了一個按鈕的點(diǎn)擊事件。

這樣，當(dāng)用戶點(diǎn)擊按鈕時，頁面中所有使用–primary-color的元素都將使用新的顏色，從而實(shí)現(xiàn)樣式的動態(tài)變化。

需要注意的是，雖然變量可以用于任何樣式屬性，但是并非所有的樣式屬性都可以通過JS修改。比如，我們不能通過JS動態(tài)地修改樣式的偽類，如:hover、:active等。

總的來說，通過JavaScript變量在CSS中動態(tài)地控制樣式，可以大大提高頁面的動態(tài)效果和交互性。