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中创建一个类，并将你想要获得的变量分配给一个属性，让我们说width，但它可以是任何其他属性，这取决于你发送的数据类型（数字，颜色） ...）

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

然后在JS中你用这个lil'脚本抓住变量：

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

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

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

但是，再次，如果你需要更多的力量，请使用Stylus。

Answer 2

我认为这就是你想要的 https://stackoverflow.com/a/12487636/347508

（我不会复制和粘贴答案以将其保存在一个地方）

Answer 3

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

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

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

3 个答案: