使用jQuery更改LESSCSS变量

时间:2012-12-03 07:17:58

标签: javascript jquery html css less

改变像

这样的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文件 提前谢谢。

1 个答案:

答案 0 :(得分:2)

而不是在较小的文件中使用dinamically更改值 - 这在客户端是不可能的(也就是JavScript),尝试使用less(类似主题)创建多个变体,然后将自定义类应用于元素(正文工作)孔)。

例如,

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