CSS中使用JS變量是一種常見技術，可以幫助開發者簡化代碼并減少重復，從而提高網站的性能。在CSS中，可以通過JavaScript變量來定義CSS屬性值，這些值可以被動態地修改并應用到HTML元素上。

使用CSS中的JS變量需要先聲明一個根元素，然后使用JavaScript將變量值賦值給根元素。在CSS中，可以通過var()函數來引用這些變量。

下面是一個示例，展示如何在CSS中使用JS變量：

// HTML
<div class="box">Hello, World!</div>
// JavaScript
const root = document.documentElement;
root.style.setProperty('--bg-color', 'red');
// CSS
.box {
background-color: var(--bg-color);
height: 100px;
width: 100px;
padding: 10px;
}

在上面的示例中，我們聲明了一個名為“bg-color”的變量，并將其設置為紅色。然后，我們引用該變量并將背景色應用到“box”元素中。當需要更改背景色時，只需要更新JS變量即可，無需修改CSS。

除了“var()”函數之外，CSS還提供了“calc()”函數來計算JS變量的值。這可以讓我們將兩個變量或變量和一個常量進行計算，并將結果應用到CSS屬性中。

總的來說，使用JS變量是一種非常實用的CSS技術，可以幫助開發者提高代碼效率和網站性能。只需要在根元素中聲明變量，在需要使用這些變量的CSS屬性中使用“var()”函數即可。如果需要計算變量的值，還可以使用“calc()”函數。