LESS - set variables on the client side

Question

I have created a LESS (http://lesscss.org/) version of a simple css grid solution (http://simplegrid.info/. Now I can happily roll my own grid sizes with the server script from LESS (lessc). That's working for me.

For demo purposes I would like to create a HTML page, where I can put the size of the css grid in a textbox and the the grid would change dynamically. Beginning of the demo is here:

http://jsfiddle.net/8QHNc/

So instead of changing @layoutwidth: 720px; in the <style rel="stylesheet" type="text/less" > section I would like to pass these variables to the LESS interpreter.

Can these be done with the client side usage of less? Can I define global variables or pass them as parameters to less.js somehow?

I am aware that I could do this without the usage of LESS (preferably with jQuery o. sth.) - but I figured since it is already there...

Answer 1

I do not know if the parser takes any arguments, but why would you refuse to use the built-in javascript evaluation, e.g. adding something like:

@layoutwidth: `document.getElementById("inputLayoutWidth") + "px"`;

to your Less-Stylesheet. Or, using jQuery, as you proposed:

@layoutwidth: `$("#inputLayoutWidth").val() + "px"`;

while using an input field like

<input type="text" id="inputLayoutWidth" value="720" />

and invoke parsing each time the input field is changed.

Answer 2

If you are using 3.x version of less CSS than u can set them in javascript code as well.

 less.modifyVars({
   '@buttonFace': '#5B83AD',
   '@buttonText': '#D9EEF2'
});

I don't know if this method is also present in older version of less.