用于编辑 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
}

这很老套，但很管用。您在 LESS 中创建一个类，并将您想要在 JS 中获取的变量分配给一个属性，比方说 width，但它可以是任何其他属性，具体取决于您发送的数据类型(数字、颜色……)

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

然后在 JS 中，您可以像这样使用那个 lil' 脚本获取变量:

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

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

---

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

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