JavaScript 库用于编辑 LESS CSS 变量？

Question

假设我有一个使用LESS和变量的网站，我想知道是否存在库或其他任何东西，可以让最终用户更改变量。例如，如果类的背景颜色在变量中指定，我希望能够在下拉菜单中进行编辑。在实施类似功能之前，我想了解是否有现有的解决方案。

- zallarak

Answer 1

最近我经常遇到这个问题，尝试了很多方法后，我的解决方案是最终放弃LESS，转而使用Stylus，它有一个不错的JavaScript API。

无论如何，这是我目前正在使用的获取JavaScript中LESS变量的方法：

var getLessVar = function (name, prop) {
  var value = $('<div class="' + name + '"></div>').hide().appendTo('body').css(prop)
  $('.' + name).remove()
  return /^\d+/.test(value) ? +value : value
}

虽然有点粗糙，但有效。您可以在LESS中创建一个类，并将要在JS中获取的变量分配给属性，比如说width，但根据您发送的数据类型（数字、颜色等），它也可以是任何其他属性。

@myvar: 30px + @foo;
.myvar { width: @myvar }

然后在JS中，您可以像这样使用那个小脚本来获取变量：

var myvar = getLessVar('myvar', 'width')

这样做会影响性能，因为它会创建一个不可见的元素来检索数据，但它可以正常工作。

---

从JS设置变量比较复杂，但你可以使用LessPHP进行一些AJAX魔法，并使用基本解析器读取variables.less来设置变量。

但是，如果需要更强大的功能，建议使用Stylus。

- elclanrs

---

哇，谢谢你的解决方案。虽然我可能不会使用它，但它确实帮助我思考问题。 - zallarak

Answer 2

modifyVars可以在运行时修改LESS变量。当使用新值调用时，LESS文件将重新编译而无需重新加载。基本用法如下：

less.modifyVars({
    '@buttonFace': '#5B83AD',
    '@buttonText': '#D9EEF2'
});

- Orwellophile