Dynamically changing less variables

Question

I want to change a less variable on client side. Say I have a less file

@color1: #123456;
@color2: @color1 + #111111;

.title { color: @color1; }
.text { color: @color2; }

I want that user yo pick a color and change the value of @color1 and recompile css without reloading the page.

Basically I'm looking for a js function, something like this

less_again({color1: '#ff0000'}) 

Answer 1

The creator of less.js added some features that should allow you to do something like this. Read the comments and the answers here: Load less.js rules dynamically

Answer 2

This less:

@color1: #123456;
@color2: @color1 + #111111;

.title { color: @color1; }
.text { color: @color2; }

compiles to this CSS and this is all the browser knows about:

.title { color: #123456; }
.text { color: #234567; }

So, now you're effectively saying you want to change dynamically to this:

.title { color: #ff0000; }

You can do that by reaching into the existing stylesheet with JS and changing the rule for .title. Or, you can define an alternate rule in your original CSS:

.alternate.title { color: #ff0000; }

And, find all the objects with .title and add .alternate to them. In jQuery, this would be as simple as:

$(".title").addClass(".alternate");

In plain JS, you'd need to use a shim to provide getElementsByClassName in a cross browser fashion and then use:

var list = document.getElementsByClassName("title");
for (var i = 0, len = list.length; i < len; i++) {
    list[i].className += " alternate";
}

Answer 3

Marvin, I wrote a function that does exactly what you're looking for, last night.

I have created a fork on Github; https://github.com/hbi99/less.js/commit/6508fe89a6210ae3cd8fffb8e998334644e7dcdc

Take a look at it. Since this is a recent addition, I'd like to hear your comments on the addition. This solution fits my needs perfectly and I think it will do the same for you.

Here is a basic sample;

Sample LESS:

@bgColor: black;
@textColor: yellow;
body {background: @bgColor; color: @textColor;}

From JS:

less.modifyVars({
  '@bgColor': 'blue',
  '@textColor': 'red'
});