使用JavaScript動態更改頁面中的LESS變量

Question

我試圖使用less.js使用JavaScript動態修改LESS變量。但是，我似乎無法讓它與modifyVars，watch或refresh一起使用。

我試着在加載less.js之前使用樣式錶鏈接標籤，使用less.modifyVars({'@bg': '#00ff00'})，但是對背景沒有任何變化。文件少我使用的是簡單的：

@bg: #000; 
body { background-color: @bg; } 

我也試圖把樣式錶鏈接標籤less.js後，在this question提到，並使用less.sheets.push($('#less-link')[0])隨後到modifyVars，然後refresh通話。背景顏色沒有變化。

我也嘗試在LESS文件中註釋掉@bg: #000;，然後通過modifyVars進行設置。沒有運氣：我以Less::ParseError: variable @bg is undefined結束。

如何動態更改LESS變量並使頁面外觀更新以反映這些更改？

編輯：嗯，這可能是一些Rails的魔法發生。當我加載我的較少文件時，變量定義消失了，我看到的全部是body { background-color: #000; }。當我切換到<style type="text/less">嵌入在頁面中的LESS塊並使用this override LESS JavaScript時，我可以用less.Override('@bg', '#00ff00')更改變量，並且頁面的背景顏色立即改變。感謝this answer。現在我會用less.js使用<style>標籤代替<link>來嘗試。

編輯：貌似不太1.3.3.min.js要少在link標籤加載 - 我得到TypeError: Cannot read property 'href' of undefined，當我嘗試使用modifyVars，我的網頁看起來是這樣的：

<style type="text/less"> 
@bg: #000; 
body { 
    background-color: @bg; 
} 
</style> 
<script src="/assets/less-1.3.3.min.js?body=1" type="text/javascript"></script> 

Answer 1

而不是做替代客戶端的變量，因爲我是在Rails應用程序中完成的，所以我把它移到了服務器端。我使用Ruby bindings for LESS來解析包含我的自定義變量的LESS，使用content_type: 'text/css'呈現解析結果，並使用AJAX請求將樣式錶鏈接添加到呈現的CSS。