Passing LESS variable to JavaScript

Question

I have a LESS file that has some variables:

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

In my JS script I need to know the sum of some initial values the user has set in the LESS file. The computed css values might change according to parent container size. Those values also change on first load, depending on the window size.

Some elements are also dynamically created so it makes it really hard to grab the correct initial values in JS because I would have to declare variables at different points in the code and in different scopes.

One idea I had is to declare a "high scope" object with some dummy variables and assign the value to the variable as soon as I append to element to the DOM but it turned out to be messy and redundant.

After many hours I came up with this idea that currently works, kinda hacky but works.

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

Is there any other way I can do this?

Answer 1

I just wrote a small piece of Javascript that reads this directly from document.styleSheets so it doesn't require any extra HTML. I've only tested it in Chrome.

In my less I have:

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

My Javascript reads:

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

Which makes oLess:

{
    thumbsWidth: 123,
    thumbsTop: 456
}

Currently this only reads the pixel values but you can easily modify it to read out anything.

-update-

Here's a fiddle: http://jsfiddle.net/Sjeiti/VHQ8x/ (with a gist in the resources https://gist.github.com/2948738)

-a very late update-

The above was nice at the time. Now you are better off using CSS variables and element.style.getPropertyValue("--my-var");. See here: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#Values_in_JavaScript