传递LESS变量的JavaScript(Passing LESS variable to JavaS

我有了一些变量LESS文件：

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

在我的JS脚本，我需要知道用户已经在LESS文件中设置一些初始值的总和。计算的CSS值可能会根据父容器的大小而改变。这些值也改变第一负载，这取决于窗口大小。

一些元素也被动态创建的，因此使得它真的很难抢在JS正确的初始值，因为我会在代码的不同点，在不同的范围来声明变量。

我有一个想法是要申报的一些虚拟变量“高范围”对象，只要我追加到元素的DOM，但它竟然是凌乱和冗余赋值给变量。

几个小时后，我想出了这个想法，目前的工作，有点哈克但工程。

减：

.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();

是否有其他方法可以让我做到这一点？

我只写了一小块的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 ）

-a很晚了最新情况：

以上是当时不错。现在，你最好使用CSS变量和element.style.getPropertyValue("--my-var"); 。在这里看到： https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#Values_in_JavaScript