用于编辑LESS CSS变量的Javascript库

Javascript library for editing LESS CSS variables?

本文关键字：Javascript 变量 CSS 编辑 LESS 用于      更新时间：2024-03-02

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

我最近经常遇到这个问题，在尝试了很多事情之后，我的解决方案是最终放弃LESS，改用Stylus，它有一个很好的JavaScript API。

无论如何，这就是我现在正在做的工作，以在JavaScript中获得更少的变量：

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。

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

less.modifyVars({
    '@buttonFace': '#5B83AD',
    '@buttonText': '#D9EEF2'
});
相关文章：