3

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ファイルをその場でコンパイルしています。
前もって感謝します。

4

1 に答える 1

2

less ファイルの値を動的に変更する代わりに (これはクライアント側 (別名 JavaScript) では不可能です)、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')
}
于 2012-12-05T16:23:05.017 に答える