javascript - 用于编辑 LESS CSS 变量的 Javascript 库？

Question

假设我有一个使用 LESS 并利用变量的网站；我想知道是否存在一个库或任何东西来为最终用户提供更改变量的能力。例如，如果在变量中指定了类的背景颜色，我希望能够在下拉菜单中对其进行编辑。我将实现类似的东西，所以在这样做之前，想知道任何现有的解决方案。

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
}

这是 hacky 但有效。您在 LESS 中创建一个类并将您想要在 JS 中获取的变量分配给一个属性，比如说width，但它可以是任何其他属性，具体取决于您发送的数据类型（数字、颜色......）

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

然后在 JS 中，您使用该 lil' 脚本获取变量，如下所示：

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

这对性能来说不是很好，因为它创建了一个不可见的元素来检索数据，但它可以工作。

---

从 JS 设置变量更复杂，但你总是可以做一些 AJAX 魔术LessPHP以及一些基本的解析器来读取你的variables.less.

但同样，如果您需要更多功能，请使用 Stylus。

Answer 2

modifyVars 允许在运行时修改 LESS 变量。当使用新值调用时，会重新编译 LESS 文件而不重新加载。简单的基本用法：

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