动态改变较少的变量

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的创建者添加了一些功能,可以让你做这样的事情.阅读评论和答案:动态加载less.js规则