将LESS变量传递给JavaScript

Question

我有一个LESS文件有一些变量:

@font-size: 100%;
@label-align: left;
@field-width: 230px;
@icon-size: 16px;
@icon-padding: 8px;

在我的JS脚本中,我需要知道用户在LESS文件中设置的一些初始值的总和.计算的css值可能会根据父容器大小而更改.这些值也会在第一次加载时更改,具体取决于窗口大小.

一些元素也是动态创建的,因此很难在JS中获取正确的初始值,因为我必须在代码和不同范围的不同点声明变量.

我的一个想法是使用一些虚拟变量声明一个"高范围"对象,并在将元素追加到DOM时立即将值赋给变量,但结果却是混乱和冗余.

几个小时后,我想出了这个目前有效的想法,有点hacky但有效.

减:

.less-vars {
    width: @field-width + @error-width + @icon-size + (@icon-padding * 2);
}

JS:

var less_vars = $('<div class="less-vars" />').hide().appendTo('body').width();
$('.less-vars').remove();

有没有其他方法可以做到这一点？

Answer 1

我刚刚写了一小段Javascript,直接从document.styleSheets中读取它,因此它不需要任何额外的HTML.我只在Chrome中测试过它.

我少了我:

#less {
    .thumbsWidth { width: @thumbsWidth; }
    .thumbsTop { width: @thumbsTop; }
}

我的Javascript写道:

var oLess = {};
$.each(document.styleSheets,function(i,sheet){
    $.each(sheet.cssRules,function(i,rule){
        var sRule = rule.cssText;
        if (sRule.substr(0,5)=="#less") {
            var aKey = sRule.match(/\.(\w+)/);
            var aVal = sRule.match(/(\d+)/);
            if (aKey&&aVal) oLess[aKey[1]] = aVal[0]<<0;
        }
    });
});
console.log(oLess);

这使得oLess:

{
    thumbsWidth: 123,
    thumbsTop: 456
}

目前,这只会读取像素值,但您可以轻松修改它以读取任何内容.

-update-

这是一个小提琴:http://jsfiddle.net/Sjeiti/VHQ8x/(有资源的要点https://gist.github.com/2948738)