Javascript 动态更改较少的变量

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

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

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

我希望用户选择一种颜色并更改@color1的值，然后在不重新加载页面的情况下重新编译css

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

less_again({color1: '#ff0000'}) 

---

less.js的创建者添加了一些特性，这些特性应该允许您执行类似的操作。请阅读此处的评论和答案：

以下内容：

@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和add.alternate的对象。在jQuery中，这将非常简单：

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

在纯JS中，您需要使用垫片以跨浏览器方式提供GetElementsByCassName，然后使用：

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

var list=document.getElementsByClassName（“title”）；
for（变量i=0，len=list.length；i

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

我在Github上创建了一个fork；

看一看。由于这是最近添加的内容，我想听听您对添加内容的评论。这个解决方案完全符合我的需要，我想它也会对你有同样的效果

这是一个基本样本

无样本： 来自JS：

---

这是没有用的，因为我使用了@color1的不同版本，比如

saturate（@color1，10%）；颜色变深（@color1，60%）；淡出（去饱和（@color1，80%），50%）等。因此“#ff0000”将分别更改为不同的值。祝你好运。如果您想更改
@color1
的值，则必须动态重新加载所有CSS样式表（修改后），因为浏览器对
@color1
一无所知，因为它在编译较少的内容时已被删除。这基本上就是问题所在，我正在寻找一种方法，可以在不重新加载新值color1的情况下减少重新编译的次数。Moin重定向的线程看起来很有希望，现在我正在努力。无论如何，谢谢。这看起来真的很酷，哈坎，期待着试一试。你为什么还没有发送拉取请求？我很想看看cloudhead对这种方法的看法。也可以看看这篇文章，我建议你的补丁可以为在生产中使用less.js创建有效的用例。我的想法是，它可以先被其他人试用，也许是经过改进，然后再发送一个pull请求。我很快就会发出一个请求。感谢您的反馈：）看起来modifyVars现在已包含在实际LES中。很好！链接到
modifyVars
文档：
@bgColor: black;
@textColor: yellow;
body {background: @bgColor; color: @textColor;}

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