css - CSSの疑似要素の前の「&」はどういう意味ですか?

Question

Twitter Bootstrapから取得した次の CSSで、アンパサンド (&) 文字は何を意味しますか?

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

Answer 1

それは CSS ではなくLESSです。

この構文を使用すると、セレクタ修飾子をネストできます。

.clearfix { 
  &:before {
    content: '';
  }
}

次のようにコンパイルされます。

.clearfix:before {
  content: '';
}

を使用する&と、ネストされたセレクターは にコンパイルされ.clearfix:beforeます。
それがなければ、コンパイルして.clearfix :before.

Answer 2

ネストされた a&は、SASS と LESS の両方で親要素を選択します。疑似要素だけでなく、あらゆる種類のセレクターで使用できます。

例えば

h1 {
    &.class {

    }
}

次と同等です。

h1.class {

}