Que signifie un "&" devant un pseudo-élément en CSS ?

Question

Dans le CSS suivant, tiré de Twitter Bootstrap Que signifie le caractère esperluette (&) ?

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

Answer 1

C'est MOINS et non CSS.

Cette syntaxe vous permet d'imbriquer des modificateurs de sélection.

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

Se compile en :

.clearfix:before {
  content: '';
}

Avec le & les sélecteurs imbriqués se compilent en .clearfix:before .
Sans elle, ils se compilent en .clearfix :before .

Answer 2

Un emboîtement & sélectionne l'élément parent dans SASS et LESS. Ce n'est pas seulement pour les pseudo-éléments, il peut être utilisé avec n'importe quel type de sélecteur.

par exemple

h1 {
    &.class {

    }
}

est équivalent à :

h1.class {

}

Answer 3

Voici un exemple SCSS/LESS :

a {
   text-decoration: underline; 
   @include padding(15px);
   display: inline-block;

     & img  {
                padding-left: 7px;
               margin-top: -4px;
             }
 }

et son équivalent en CSS :

a {
  text-decoration: underline; 
  @include padding(15px);
  display: inline-block;
}

a img  {
     padding-left: 7px;
     margin-top: -4px;
   }

Answer 4

Le "&" est une fonctionnalité utile dans les préprocesseurs Sass et Less. Il est utilisé pour l'imbrication. C'est un gain de temps par rapport à CSS.