アンパサンド (&) を CSS 疑似要素で使用した場合、LESS ではどのように機能しますか?

CSS 疑似要素のアンパサンド: 簡単なトリック

CSS では、アンパサンド (&) は通常、疑似要素と組み合わせて使用​​されます。 :before と :after など。ただし、Twitter Bootstrap から提供された例では、アンパサンドは少し異なる方法で使用されています。

問題の構文は次のとおりです。

<code class="css">.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}</code>

詳しく調べると、これは次のとおりであることがわかります。純粋な CSS ではなく、人気のある CSS プリプロセッサである LESS です。 LESS では、アンパサンドを使用してセレクターをネストできます。擬似要素の先頭に親セレクター (&) を付けることで、次のことを実現できます:

<code class="less">.clearfix {
  &:before {
    content: '';
  }
}</code>

これは次のようにコンパイルされます:

<code class="css">.clearfix:before {
  content: '';
}</code>

アンパサンドがないと、セレクターはコンパイルされます。 .clearfix :before に変更します。これは有効な CSS 構文ではありません。したがって、LESS では、アンパサンドを使用してセレクター修飾子をネストし、より簡潔で読みやすいコードを実現します。

以上がアンパサンド (&) を CSS 疑似要素で使用した場合、LESS ではどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。