使用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。