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

Question

我正在尝试使用 less.js使用 JavaScript 动态修改 LESS 变量。但是，我似乎无法让它与 modifyVars 一起使用, watch , 或 refresh .

我尝试在加载 less.js 之前放置样式表链接标记，使用 less.modifyVars({'@bg': '#00ff00'}) ，但背景没有发生变化。我使用的 less 文件很简单:

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

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

我还尝试注释掉 @bg: #000;在 LESS 文件中，然后通过 modifyVars 设置它.运气不好:我最终得到了 Less::ParseError: variable @bg is undefined .

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

编辑: 嗯，这可能是 Rails 发生的一些魔法。当我加载我的 less 文件时，变量定义消失了，我看到的是 body { background-color: #000; } .当我切换到使用 <style type="text/less"> LESS block 嵌入页面并使用 this override LESS JavaScript , 我可以用 less.Override('@bg', '#00ff00') 改变一个变量并且页面的背景颜色立即改变。感谢this answer .现在我将使用 <style> 与 less.js 一起尝试标记而不是 <link> .

编辑: 看起来 less-1.3.3.min.js 想要在 link 中加载 LESS标签——我得到 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。