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 { co         


        

Answer 1

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";
}