Променете променливата LESSCSS с jQuery

Възможно ли е по някакъв начин да промените променлива LESSCSS като

@basecolor: #F90;

който по-късно се използва така:

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

с jQuery въз основа на потребителски вход от нещо като следното:

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

Използвам less.js, за да компилирам .less файловете в движение.
Благодаря предварително.


person Stefan    schedule 03.12.2012    source източник
comment
Това може да е от полза: stackoverflow.com/questions/ 3175013/   -  person Calvin    schedule 03.12.2012
comment
Благодаря, но вече разгледах това, става дума за динамично зареждане на .less файлове по време на изпълнение, а не за динамично съдържание вътре в .less файлове   -  person Stefan    schedule 03.12.2012
comment
Няма начин по подразбиране да направите това, без да създадете някакъв вид замяна в less.js или алтернативни методи AFAIK. Ето друго, което е по-подходящо за вашия проблем тогава: stackoverflow.com/questions/10274260/   -  person Calvin    schedule 03.12.2012
comment
Благодаря ви, ще го погледна.   -  person Stefan    schedule 03.12.2012


Отговори (1)


Вместо да променяте динамично стойностите във вашия файл less - което е невъзможно от страна на клиента (известен още като JavScript), опитайте да създадете множество варианти в less (нещо като тема) и след това приложете персонализиран клас към елемент (body работи добре).

Например,

[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')
}
person Marius Stuparu    schedule 05.12.2012
comment
В този случай можете само да вмъкнете ‹style /› с този цвят в html, като използвате JavaScript. Например модифицирате .colour клас, който съдържа кода на цвета и който се прилага за цялата страница. - person Marius Stuparu; 07.12.2012