Przechodząc do mniej zmienny JavaScript

Question

mam mniej plik, który ma kilka czynników:

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

W moim skryptu JS muszę wiedzieć sumę początkowych wartości użytkownik określonymi w mniej pliku. Obliczone wartości css mogą się zmieniać w zależności od wielkości kontenera nadrzędnego. Te wartości zmieniają się również przy pierwszym obciążeniu, w zależności od rozmiaru okna.

Niektóre elementy są również tworzone dynamicznie, więc naprawdę trudno jest pobrać poprawne wartości początkowe w JS, ponieważ musiałbym zadeklarować zmienne w różnych punktach kodu i różnych zakresach.

Jednym z pomysłów było zadeklarowanie obiektu "wysokiego zakresu" z pewnymi sztucznymi zmiennymi i przypisanie wartości do zmiennej, gdy tylko dodaję element do DOM, ale okazało się, że jest niepotrzebne i zbędne.

Po wielu godzinach wpadłem na pomysł, który obecnie działa, trochę hacky, ale działa.

MNIEJ:

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

Czy istnieje inny sposób mogę to zrobić?

Answer 1

Właśnie napisałem mały fragment kodu Javascript, który czyta to bezpośrednio z pliku document.styleSheets, więc nie wymaga żadnego dodatkowego HTML. Testowałem go tylko w Chrome.

W moim mniej mam:

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

My JavaScript brzmi:

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

Co sprawia oLess:

{ 
    thumbsWidth: 123, 
    thumbsTop: 456 
} 

Obecnie to tylko odczytuje wartości pikseli, ale można łatwo zmodyfikuj go, aby odczytać cokolwiek.

-update-

Oto skrzypce: http://jsfiddle.net/Sjeiti/VHQ8x/ (z GIST w zasobach https://gist.github.com/2948738)