使用JavaScript动态更改页面中的LESS变量

Question

我正在尝试使用less.js使用JavaScript动态修改LESS变量.不过,我似乎无法得到它一起工作modifyVars,watch或refresh.

我在加载less.js之前尝试使用样式表链接标记less.modifyVars({'@bg': '#00ff00'}),但是后台没有发生任何变化.我使用的文件越少越简单:

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

我还尝试将样式表链接标记放在less.js之后,如本问题所述,然后使用less.sheets.push($('#less-link')[0])调用modifyVars然后调用refresh.背景颜色没有变化.

我也尝试@bg: #000;在LESS文件中注释掉,然后设置它modifyVars.没有运气:我最终得到了一个Less::ParseError: variable @bg is undefined.

如何动态更改LESS变量并更新页面外观以反映这些更改？

编辑:嗯,这可能是一些Rails魔术的发生.当我加载我的less文件时,变量定义消失了,我看到的只是body { background-color: #000; }.当我切换到使用<style type="text/less">页面中嵌入的LESS块并使用此覆盖LESS JavaScript时,我能够更改变量less.Override('@bg', '#00ff00')并立即更改页面的背景颜色.感谢这个答案.现在我将使用<style>标签而不是使用less.js来尝试它<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 应用程序中进行变量替换，所以我没有将变量替换为客户端，而是将其移至服务器端。我使用LESS 的 Ruby 绑定来解析一些包含我的自定义变量的 LESS，使用 AJAX 请求渲染解析结果content_type: 'text/css'并使用 AJAX 请求将样式表链接添加到渲染的 CSS。