将LESS变量传递给JavaScript

我有一个有一些变量的LESS文件：

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

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

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

我的一个想法是使用一些虚拟变量声明一个“高范围”对象，并在将元素追加到DOM时立即将值赋给变量，但事实certificate它是混乱和多余的。

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

减：

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

JS ：

 var 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 ）