在前端開發中，我們常常需要從JavaScript中傳遞一些變量到CSS樣式中。這時候我們就需要使用一些特殊的語法來獲取這些變量。接下來，我們就來介紹一些如何使用CSS樣式取得js變量的方法。

首先，我們可以使用CSS變量來實現。在CSS中定義變量非常簡單，只需要使用var()函數即可，舉例如下：

:root {
--main-color: blue;
}
.my-element {
color: var(--main-color);
}

這里通過:root偽類來定義了一個變量--main-color，然后在.my-element中使用var()函數引用這個變量來設置顏色值。通過這種方式，我們在JavaScript中只需要通過document.documentElement來獲取--main-color的值即可。

另一種通過CSS樣式獲取js變量的方式則是使用CSS的attr()函數。這個函數可以用于獲取HTML元素上定義的data-*屬性，而我們可以在JS中通過設置這個data-*屬性的值，來實現通過CSS樣式間接獲取變量的目的。下面是一個例子：

.my-element:before {
content: attr(data-main-color);
color: red;
}

這段代碼中，我們定義了一個偽類:before，然后在其中使用了attr()函數來獲取元素的data-main-color屬性值，進而設置了文字顏色為紅色。在JS中，我們可以通過設置my-element元素的data-main-color屬性值來間接控制文字顏色。

通過以上兩種方式，我們就可以在CSS樣式中獲取JS變量了。但需要注意的是，這種方式雖然可以實現較為靈活的根據變量調整CSS樣式的目的，但也可能會讓代碼變得過于復雜。因此，在使用這種方式之前，我們需要對場景仔細思考，為避免不必要的代碼復雜性而重構實現。