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

【问题标题】：dynamically change LESS variables in page with JavaScript使用 JavaScript 动态更改页面中的 LESS 变量
【发布时间】：2013-05-09 02:45:04
【问题描述】：

我正在尝试使用 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。背景颜色没有变化。

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

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

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

编辑： 看起来像 less-1.3.3.min.js 希望 LESS 被加载到 link 标签中——当我尝试使用 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>

【问题讨论】：

标签： javascript css less

【解决方案1】：

我没有在客户端进行变量替换，因为无论如何我都是在 Rails 应用程序中进行的，所以我将它移到了服务器端。我正在使用Ruby bindings for LESS 解析一些包含我的自定义变量的LESS，使用content_type: 'text/css' 呈现解析结果并使用AJAX 请求将样式表链接添加到呈现的CSS。

【讨论】：