0

以下のルールをLessに書きました。目的はspan、太字で、それに適用されるクラスに応じて色を付けることです。

span {
    font-weight: bold;
    .cheapest { color: green; }
    .expensive { color: red; }
}

影響を受けるテキストは太字の規則を正しく適用しますが、色の規則は適用されません。Visual Studio では、これが次の CSS にコンパイルされていることがわかります。

 span .cheapest {
  color: #00ff00;
 }
span .expensive {
  color: #ff0000;
}

要素とクラスの間のスペースは、 span の子である最も安価なクラスまたは高価なクラスを持つ要素に色を適用するようなものですが、これは私が望むものではありません。

私が欲しいものを正しく説明する方法が Less にありますか? もちろん、ネスティングを削除してスパン セレクターを繰り返すこともできますが、それでは Less の最大の機能の 1 つが無効になります。何かアドバイス？

4

1 に答える 1

3 
span {
    font-weight: bold;
    &.cheapest { 
    color: green; 
    }
    &.expensive { 
    color: red; 
    }
}

コンパイルすると:

span {
  font-weight: bold;
}
span.cheapest {
  color: green;
}
span.expensive {
  color: red;
}

&コンビネータについてはこちらで読むことができます。

于 2013-03-04T15:04:16.283 に答える