web-dev-qa-db-ja.com

LESS変数を設定するためのCSSクラスに基づくLESS条件

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

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

例えば：

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

この方法では、他のLessファイル内で@themeColor変数を使用するだけで済みます。

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

less
12
kingarthurpt

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

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

[〜＃〜] less [〜＃〜]

//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;
}

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

22
ScottS

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」などのプレフィックスを付ける必要があります。

4
Karl Tynan

実際に@importを使用してテーマをロードできます！したがって、common.lessにはすべてのデフォルトスタイルが含まれ、@themeColorが適用されます。

.mainThemeDependentCss() {
  //file with all themed styles
  @import 'common.less';
}

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

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

ところで、common.lessでbodyセレクターを使用することは機能しないため、使用しないでください。

1
sliter