假设我有一个使用LESS和变量的网站,我想知道是否存在库或其他任何东西,可以让最终用户更改变量。例如,如果类的背景颜色在变量中指定,我希望能够在下拉菜单中进行编辑。在实施类似功能之前,我想了解是否有现有的解决方案。
最近我经常遇到这个问题,尝试了很多方法后,我的解决方案是最终放弃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 }
var myvar = getLessVar('myvar', 'width')
从JS设置变量比较复杂,但你可以使用LessPHP
进行一些AJAX魔法,并使用基本解析器读取variables.less
来设置变量。
但是,如果需要更强大的功能,建议使用Stylus。
modifyVars可以在运行时修改LESS变量。当使用新值调用时,LESS文件将重新编译而无需重新加载。基本用法如下:
less.modifyVars({
'@buttonFace': '#5B83AD',
'@buttonText': '#D9EEF2'
});