CSS中使用JS變量是一種非常有用的技巧。我們可以在Javascript中定義變量，然后在CSS中使用這些變量。 每當我們更新變量，CSS會自動重新渲染樣式。

const primaryColor = '#FF5733';
document.documentElement.style.setProperty('--primary-color', primaryColor);

上面的代碼中，我們定義了一個名為primaryColor的變量，并將其設置為#FF5733。接下來，我們可以使用JavaScript來更新名為--primary-color的根變量，以便在CSS中使用它。

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

現在，無論變量何時更改，網頁上的h1元素都將自動更改為新的色值。

另外，我們還可以在CSS中使用函數來操作變量。例如，下面的代碼將我們之前的primaryColor變量轉換為更深的顏色：

:root {
--primary-color: #FF5733;
--dark-primary-color: color(var(--primary-color) darken(10%));
}
h1 {
color: var(--dark-primary-color);
}

這里，我們定義一個名為--dark-primary-color的新變量，并使用CSS的color()函數將其設置為比--primary-color更深的顏色。我們在h1中使用--dark-primary-color來設置文字顏色。

總之，使用JS變量使得在CSS中編寫更加靈活和動態的樣式變得非常容易。您可以在JavaScript中定義變量和函數，然后在CSS中使用這些變量來更改樣式。這種靈活性也使得跨瀏覽器和跨設備的樣式更容易。