5

我正在尝试使用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; }. 当我切换到使用<style type="text/less">嵌入在页面中的 LESS 块并使用此覆盖 LESS JavaScript时，我能够更改变量，less.Override('@bg', '#00ff00')并且页面的背景颜色立即更改。感谢这个答案。现在，我将使用<style>标签而不是.js 来尝试使用<link>less.js。

编辑：看起来 less-1.3.3.min.js 希望 LESS 被加载到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>
4

1 回答 1

1

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

于 2013-05-09T03:58:25.730 回答