1

私の少ないコードは次のようなものです：

body {
  @var: white;

  &.blue { @var: blue; }
  &.red { @var: red; }
  &.abc { @var: #badass; }

  background-color: @var;
}

私が望むのは、bodyがクラスを持っている場合.abc、変数の値@varは#badass、クラスを持っている場合、.blue値はblueなどです。しかし、それは起こりません。変数の値は、残りのクラスとは無関係に変更されません。

4

1 に答える 1

2

そのためのパラメトリックミックスインを作成する必要があります。

.bg(@color){
  background-color:@color;
}

その後、次のコードが機能します。

body {
  .bg("white");

  &.blue{ .bg("blue");  }
  &.red { .bg("red");   }
  &.abc { .bg(#bada55); }

}

変数を再割り当てしているため、実行していることは機能していません。これは完全に機能しますが、クラスに新しい値を書き込んでいません。（変数を再割り当てするたびに、LESSが新しいルールを作成したとしても、まったく意味がありません。）また、他のプログラミング言語と同様に、LESSにはスコープがあるため、LESSに到達するとbackground-color: @var; @var、値がwhite割り当てられて作成されます。それに応じて支配します。次のように機能します（ただし、もちろん意味がありません）。

body {
  @var: white;

  &.blue{ @var: blue;    background-color: @var;}
  &.red { @var: red;     background-color: @var;}
  &.abc { @var: #bada55; background-color: @var;}
  background-color: @var;
}
于 2012-08-07T12:46:36.263 に答える