CSS文件可以使用JavaScript變量來實現更靈活的樣式控制。在Web開發中，使用CSS是很常見的，但是有時候我們需要動態地改變樣式，這時候CSS文件就顯得不夠靈活了，這時候我們可以使用JavaScript變量來動態地控制CSS樣式。

<style>
:root {
--color-primary: red;
--color-secondary: green;
}
.btn {
background-color: var(--color-primary);
color: var(--color-secondary);
}
</style>

在上面的CSS代碼中，:root選擇器定義了兩個變量Color-primary和Color-secondary，這些變量可以在整個文檔中使用。我們可以在JavaScript中改變這些變量，這樣可以動態地改變按鈕的樣式。

<script>
const btn = document.querySelector('.btn');
btn.style.setProperty('--color-primary', 'blue');
btn.style.setProperty('--color-secondary', 'yellow');
</script>

在上面的JavaScript代碼中，我們通過querySelector選擇器選中了一個class為btn的元素。接著，我們使用style.setProperty()函數來改變CSS變量的值。在這個例子中，我們動態地改變了按鈕的顏色。

總之，使用JavaScript變量來控制CSS樣式可以讓我們動態地改變頁面的樣式，從而實現更豐富的效果。