将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:

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

还有其他方法可以实现这个吗？

- elclanrs

Answer 1

我刚刚写了一小段JavaScript代码，它直接从document.styleSheets中读取样式信息，因此不需要额外的HTML。我只在Chrome中进行了测试。

在我的less文件中：

#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
}

目前，它只读取像素值，但您可以轻松修改它以读取任何内容。

-更新-

这里有一个 Fiddle：http://jsfiddle.net/Sjeiti/VHQ8x/（资源中还有一个要点https://gist.github.com/2948738）。

-很晚的更新-

上面的方法在当时非常好。现在，最好使用 CSS 变量和 element.style.getPropertyValue("--my-var");。请参阅此处：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties#Values_in_JavaScript

- Sjeiti

---

注意：为了解决IE bug 955703，您必须在try/catch-Block中包装sRule = oRules[j].cssText。虽然您的gist已经正确实现了这一点，但是在fiddle中却没有。 - Aides