javascript - 动态改变更少的变量

Question

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

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

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

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

基本上我在寻找一个js函数，像这样

less_again({color1: '#ff0000'}) 

Answer 1

马文， 昨晚我写了一个函数，它完全可以满足您的需求。

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

看看吧。由于这是最近添加的内容，因此我想听听您对添加内容的评论。该解决方案完全符合我的需求，我认为它对您也同样适用。

这是一个基本示例；

少样本:

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

来自 JS:

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