0

以下のようなクラスを作りたいです。

.colored{
     &{
          .red{background-color:red;}
          .blue{background-color:blue;}
          .gray{background-color:gray;}
      }
}

それは機能していませんが、次のように書くと：

.colored{
          &.red{
              background-color:red;
          }
          &.blue{
              background-color:blue;
          }
          &.gray{
              background-color:gray;
          }
}

それは動作します。最初のバージョンが期待どおりに動作しない理由はありますか?

4

1 に答える 1

3

理由：

これは、Less でネストが機能する (そして機能するはずである) ためです。セレクターを別のセレクターの下にネストすると、内側のセレクターは、外側のセレクターによって表される要素の子である要素に適用できると見なされます。

以下はコードです

.colored{
    &{
        .red{background-color:red;}
        .blue{background-color:blue;}
        .gray{background-color:gray;}
    }
}

は以下と同等です ( で&ある親セレクターに置き換えられるため.colored)

.colored{
    .red{background-color:red;}
    .blue{background-color:blue;}
    .gray{background-color:gray;}
}

.colored .red前述したように、これは,.colored .blueにコンパイルされます.colored .gray(セレクター間のスペースに注意してください)。

一方、&直前にを挿入する.redと、. blue、 。gray、これは、親セレクターとネストされたセレクターが同じ要素 (子ではなく) に適用されることを意味します。出力されるセレクターは、、、です.colored.red(.colored.blueスペース.colored.grayがないことに注意してください)。

解決：

これは質問と同じコードであり、推奨される解決策です。完全にするためだけに、回答に再度投稿しています。

.colored{
    &.red{
        background-color:red;
    }
    &.blue{
        background-color:blue;
    }
    &.gray{
        background-color:gray;
    }
}
于 2016-05-15T11:42:57.047 に答える