3

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.

Stefan
  • 2,164
  • 1
  • 23
  • 40
  • This might be of some help: http://stackoverflow.com/questions/3175013/load-less-js-rules-dynamically – Calvin Dec 03 '12 at 07: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 Dec 03 '12 at 07:44
  • 2
    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: http://stackoverflow.com/questions/10274260/programmatically-editing-less-css-code-with-jquery-like-selector-syntax/12487636#12487636 – Calvin Dec 03 '12 at 07:47
  • Thank you, i'll have a look at it. – Stefan Dec 03 '12 at 07:58

1 Answers1

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')
}
Marius Stuparu
  • 474
  • 3
  • 14
  • In this case, you can only insert a 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. – Marius Stuparu Dec 07 '12 at 13:05