Pasando variables MENOS tener JavaScript

Question

Tengo un archivo MENOS que tiene algunas variables:

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

En mi script JS Necesito saber la suma de algunos valores iniciales que el usuario haya establecidos en el archivo MENOS. Los valores de css calculados pueden cambiar según el tamaño del contenedor principal. Esos valores también cambian en la primera carga, dependiendo del tamaño de la ventana.

Algunos elementos también se crean dinámicamente por lo que es realmente difícil obtener los valores iniciales correctos en JS porque tendría que declarar variables en diferentes puntos en el código y en diferentes ámbitos.

Una idea que tuve es declarar un objeto de "alto alcance" con algunas variables ficticias y asignar el valor a la variable tan pronto como agregué el elemento al DOM pero resultó ser complicado y redundante.

Después de muchas horas se me ocurrió esta idea que actualmente funciona, es un poco hacky pero funciona.

MENOS:

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

¿Hay alguna otra manera que puedo hacer esto?

Answer 1

Acabo de escribir un pequeño fragmento de Javascript que lo lee directamente de document.styleSheets por lo que no requiere ningún HTML adicional. Solo lo probé en Chrome.

En mi menos que tengo:

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

Mi Javascript lee:

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

Lo que hace LOECE:

{ 
    thumbsWidth: 123, 
    thumbsTop: 456 
} 

Actualmente esto sólo lee los valores de los píxeles, pero puede fácilmente modificarlo para leer cualquier cosa.

-update-

Aquí es un violín: http://jsfiddle.net/Sjeiti/VHQ8x/ (con una esencia de los recursos https://gist.github.com/2948738)