如何在瀏覽器中動態更改少量參數並編譯css？

Question

我正在嘗試使用LESS CSS實現基本主題滾輪功能。 假設我有以下更少的代碼，它編譯成一個.css文件包含在頁面：

@main-background-color: #809BB8; 

body 
{ 
    background-color: @main-background-color; 
} 

我想基於一個用戶操作的JavaScript動態改變@主背景色（顏色Picker）並動態編譯LESS代碼並刷新頁面的樣式，以便用戶更改立即反映在瀏覽器中。 這可能嗎？ 請指教！

感謝

Answer 1

你可以嘗試使用像less.js功能：

less.refreshStyles() 

或

less.modifyVars() 

你也許可以更多一些對這個位置：Dynamically changing less variables

東西沿着這條線與JavaScript和modifyVars可能工作：

var $picked-color = "#809BB8"; 
    less.modifyVars({ 
     '@main-background-color': $picked-color 
    });