14

Web サイトのアクティブなテーマに一致するように Less 変数を設定する必要があります。つまり、テーマごとに異なる色を使用します。

テーマを定義する HTML の本体 CSS クラスに基づいて、@themeColor を適切な色に設定したいと思います。

例えば：

body.themeBlue { @themeColor: blue; }
body.themeRed { @themeColor: red; }

このようにすれば、他の Less ファイル内で @themeColor 変数を使用するだけで済みます。

誰でも助けることができますか？this ( http://www.lesscss.org/#-scope ) によると、そのようなことは可能ですが、機能させることはできません。ここで何が起こっているのですか？

4

3 に答える 3

23

bodyLESS ファイルは、実行時に html 要素に適用される実際のクラスを読み取ることができません(そのようなことを行うには、おそらく JavaScript ソリューションを実装する必要があります)。

クラスに基づいてすべてのテーマ css をすぐに使用できるようにしたい場合は、bodyこれを実装して必要なすべてのテーマ ベースの css を mixin に配置し、それをテーマ クラスの下に適用するのが最善の方法です。これにより、コードの重複が減少します。例えば：

以下

//mixin with all css that depends on your color
.mainThemeDependentCss() {
  @contrast: lighten(@themeColor, 20%);
  h1 {color: @themeColor;}
  p {background-color: @contrast;}
}

//use the mixin in the themes
body.themeBlue {
  @themeColor: blue;
  .mainThemeDependentCss();
}

body.themeRed {
  @themeColor: red;
  .mainThemeDependentCss();
}

CSS出力

body.themeBlue h1 {
  color: #0000ff;
}
body.themeBlue p {
  background-color: #6666ff;
}
body.themeRed h1 {
  color: #ff0000;
}
body.themeRed p {
  background-color: #ff6666;
}

テーマの側面または方法を扱うその他の回答については、次を参照してください。

于 2013-03-12T17:56:02.263 に答える
3

Less の変数は実際には定数であり、一度だけ定義されます。

スコープはコード中かっこ内で機能するため、必要な各テーマ内に CSS をネストする必要があります (つまり、重複を意味します)。

これを行う必要があるため、これは理想的ではありません。

body.themeBlue {
  @color: blue;
  /* your css here */
}

body.themeRed {
  @color: red;
  /* your css here AGAIN :( */
}

ただし、次のような変数を使用することもできます。

@color: black;
@colorRed: red;
@colorBlue: blue;

h1 {
  color: @color; // black
  body.themeRed & {
    color: @colorRed; // red
  }
  body.themeBlue & {
    color: @colorBlue; // blue
  }
}

色を宣言する必要があるのは 1 回だけですが、テーマによって色が異なる "body.themeRed" などのプレフィックスを常に実行する必要があります。

于 2013-03-12T17:27:05.813 に答える