动态改变更少的变量答案

【问题标题】：Dynamically changing less variables动态改变更少的变量
【发布时间】：2011-10-19 14:50:00
【问题描述】：

我想在客户端更改一个 less 变量。假设我的文件较少

@color1: #123456;
@color2: @color1 + #111111;

.title { color: @color1; }
.text { color: @color2; }

我希望该用户选择一种颜色并更改 @color1 的值并重新编译 css 而无需重新加载页面。

基本上我在找一个js函数，类似这样的

less_again({color1: '#ff0000'})

【问题讨论】：

【解决方案1】：

马文，昨晚我写了一个函数，它完全符合你的要求。

看看吧。由于这是最近添加的，因此我想听听您的 cmets 关于添加的内容。这个解决方案非常适合我的需求，我认为它也会为你做同样的事情。

这是一个基本示例；

少样本：

@bgColor: black;
@textColor: yellow;
body {background: @bgColor; color: @textColor;}

less.modifyVars({
  '@bgColor': 'blue',
  '@textColor': 'red'
});

【讨论】：

这看起来真的很酷 Hakan，期待尝试一下。您还没有发送拉取请求是有原因的吗？我很想看看 cloudhead 对这种方法的看法。
另见这篇文章，我建议你的补丁可以为在生产中使用 less.js 创建有效的用例。 stackoverflow.com/a/9491074/255961
我的想法是，它可以先由其他人试用，或许可以改进，然后发送拉取请求。我会尽快发送拉取请求。感谢您的反馈:)
现在看起来 modifyVars 包含在实际的 less 中。效果很好！
链接到modifyVars 文档：lesscss.org/usage/#using-less-in-the-browser-modify-variables

【解决方案2】：

less.js 的创建者添加了一些功能，可以让你做这样的事情。在此处阅读 cmets 和答案：Load less.js rules dynamically

【讨论】：

【解决方案3】：

这个少：

@color1: #123456;
@color2: @color1 + #111111;

.title { color: @color1; }
.text { color: @color2; }

编译成这个 CSS，这就是浏览器所知道的全部内容：

.title { color: #123456; }
.text { color: #234567; }

所以，现在您实际上是在说您想要动态更改为：

.title { color: #ff0000; }

您可以通过使用 JS 访问现有样式表并更改 .title 的规则来做到这一点。或者，您可以在原始 CSS 中定义替代规则：

.alternate.title { color: #ff0000; }

然后，找到所有带有 .title 的对象并将 .alternate 添加到它们。在 jQuery 中，这很简单：

$(".title").addClass(".alternate");

在纯 JS 中，您需要使用 shim 以跨浏览器的方式提供 getElementsByClassName，然后使用：

var list = document.getElementsByClassName("title");
for (var i = 0, len = list.length; i < len; i++) {
    list[i].className += " alternate";
}

【讨论】：

这没什么用，因为我使用不同版本的@color1，比如saturate(@color1, 10%); darken(@color1, 60%); fadeout(desaturate(@color1, 80%), 50%); 等，所以“#ff0000”会更改为每个不同的值。
祝你好运。如果您想更改@color1 的值，则必须动态重新加载所有CSS 样式表（修改后），因为浏览器不知道@color1，因为在编译less 时它已被删除。
这基本上是问题所在，我正在寻找一种方法来减少重新编译，而无需重新加载 color1 的新值。 Moin 重定向的线程看起来很有希望，现在我正在努力。还是谢谢。