web-dev-qa-db-ja.com

より少ない変数を動的に変更する

クライアント側でより少ない変数を変更したいと思います。ファイルが少ないとしましょう

@color1: #123456;
@color2: @color1 + #111111;

.title { color: @color1; }
.text { color: @color2; }

ユーザーが色を選択して@ color1の値を変更し、ページをリロードせずにcssを再コンパイルするようにします。

基本的に私はこのようなjs関数を探しています

less_again({color1: '#ff0000'})
javascriptless
12
marvin

Less.jsの作成者は、このようなことを可能にするいくつかの機能を追加しました。ここでコメントと回答を読んでください： less.jsルールを動的にロードします

6
Moin Zaman

マーヴィン、昨夜、あなたが探しているものを正確に実行する関数を書きました。

Githubでフォークを作成しました。 https://github.com/hbi99/less.js/commit/6508fe89a6210ae3cd8fffb8e998334644e7dcdc

それを見てください。これは最近の追加ですので、追加についてのコメントをお願いします。このソリューションは私のニーズに完全に適合しており、あなたにも同じことができると思います。

これが基本的なサンプルです。

サンプルLESS：

@bgColor: black;
@textColor: yellow;
body {background: @bgColor; color: @textColor;}

JSから：

less.modifyVars({
  '@bgColor': 'blue',
  '@textColor': 'red'
});
21
Hakan Bilgin

これ以下：

@color1: #123456;
@color2: @color1 + #111111;

.title { color: @color1; }
.text { color: @color2; }

このCSSにコンパイルされ、これがブラウザが知っているすべてです。

.title { color: #123456; }
.text { color: #234567; }

つまり、これに動的に変更したいということです。

.title { color: #ff0000; }

これを行うには、JSを使用して既存のスタイルシートにアクセスし、.titleのルールを変更します。または、元のCSSで代替ルールを定義できます。

.alternate.title { color: #ff0000; }

そして、.titleを持つすべてのオブジェクトを見つけて、それらに.alternateを追加します。 jQueryでは、これは次のように簡単です。

$(".title").addClass(".alternate");

プレーンJSでは、シムを使用してクロスブラウザー方式でgetElementsByClassNameを提供してから、次を使用する必要があります。

var list = document.getElementsByClassName("title");
for (var i = 0, len = list.length; i < len; i++) {
    list[i].className += " alternate";
}
0
jfriend00