Передача МЕНЬШЕ переменной в JavaScript

Question

У меня есть МЕНЬШЕ файл, который имеет некоторые переменные:

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

В моей JS скрипте мне нужно знать сумму некоторых начальных значений пользователь установил в МЕНЬШЕ файле. Вычисленные значения 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(); 

Есть ли другой способ, которым я могу это сделать?

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)