动态改变较少的变量

Question

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

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

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

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

基本上我正在寻找一个像这样的

的js函数

less_again({color1: '#ff0000'}) 

Answer 1

马文 昨晚我写了一个功能，正是你正在寻找的东西。

我在Github上创建了一个fork; https://github.com/hbi99/less.js/commit/6508fe89a6210ae3cd8fffb8e998334644e7dcdc

看看它。由于这是最近添加的内容，我想听听您对此添加的评论。这个解决方案完全符合我的需求，我认为它会为你做同样的事情。

这是一个基本样本;

样本少：

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

来自JS：

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

Answer 2

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

Answer 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中，您需要使用填充程序以跨浏览器的方式提供getElementsByClassName，然后使用：

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