Comment fonctionne l'esperluette (&) dans LESS lorsqu'elle est utilisée avec des pseudo-éléments CSS ?

Esperluette dans les pseudo-éléments CSS : une astuce MOINS

En CSS, l'esperluette (&) est généralement utilisée en conjonction avec des pseudo-éléments, tels que :avant et :après. Cependant, dans l'exemple fourni par Twitter Bootstrap, l'esperluette est utilisée d'une manière légèrement différente.

La syntaxe en question est :

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

En y regardant de plus près, on se rend compte qu'il s'agit de pas du CSS pur mais LESS, un préprocesseur CSS populaire. Dans LESS, l'esperluette permet l'imbrication des sélecteurs. En préfixant les pseudo-éléments avec le sélecteur parent (&), nous pouvons obtenir ce qui suit :

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

Cela compilera en :

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

Sans l'esperluette, les sélecteurs compileraient à .clearfix :before, qui n'est pas une syntaxe CSS valide. Par conséquent, dans LESS, l'esperluette est utilisée pour imbriquer les modificateurs de sélecteur, permettant un code plus concis et lisible.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!