Change LESSCSS variable with jQuery

Question

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.

This might be of some help: stackoverflow.com/questions/3175013/… — Calvin
– Calvin, Commented Dec 3, 2012 at 7:38
Thanks, but i already had a look at this one, it's about dynamically loading .less files at "runtime" not dynamic content inside .less files — Stefan
– Stefan, Commented Dec 3, 2012 at 7:44
There's no default way to do this without creating some sort of override in the less.js or alternative methods AFAIK. Here's another more suited to your problem then: stackoverflow.com/questions/10274260/… — Calvin
– Calvin, Commented Dec 3, 2012 at 7:47

Marius Stuparu · Accepted Answer · 2012-12-05 16:23:05Z

2

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')
}

answered Dec 5, 2012 at 16:23

Marius Stuparu

4743 silver badges14 bronze badges

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

1 Comment

Marius Stuparu Over a year ago

In this case, you can only insert a <style /> with that colour in the html, using JavaScript. For example, you modify a .colour class that contains the colour code, and that applies to the entire page.

Collectives™ on Stack Overflow

Change LESSCSS variable with jQuery

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