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?

Sjeiti · Accepted Answer · 2019-07-09 20:26:29Z

11

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

edited Jul 9, 2019 at 20:26

answered Jun 1, 2012 at 10:19

Sjeiti

2,6682 gold badges32 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aides Over a year ago

Note: to address IE bug 955703 you have to wrap sRule = oRules[j].cssText in a try/catch-Block. While this is correctly implemented in your gist it is not in the fiddle.

Collectives™ on Stack Overflow

Passing LESS variable to JavaScript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related