CODEWITHSUNDEEP
javascriptjqueryhtmlcssless
Stefan
Stefan

Reputation: 2194

Change LESSCSS variable with jQuery

Is it somehow posible to change a LESSCSS variable like

@basecolor: #F90;

that is later used like this: 

.myclass {
     color: darken(@basecolor, 10%);
 }

with jQuery based on user input from something like the following:

$("#mybutton").click(function() {
    var color = $("#inputfield").val();
    //Some magic to change the LESS basecolor
});

I am using less.js to compile the .less files on the fly.
Thanks in advance.

Upvotes: 3

Views: 1659

Answers (1)

Marius Stuparu
Marius Stuparu

Reputation: 474

Instead of dinamically changing values in your less file - which is impossible on the client side (aka JavScript), try creating multiple variants in less (something like a theme), and then apply a custom class to an element (body works well).

For example,

[style.less]
@green: #00EE00;
@blue: #0000EE;

body {
  &.green { background:@green }
  &.blue { background:@blue }
}

[main.js]
$('#id').on('click', 'a.blue', function() {
  $('body').removeClass('green').addClass('blue')
}

Upvotes: 2

Related Questions