Was bedeutet ein "&" vor einem Pseudoelement in CSS?

Was bedeutet das kaufmännische Und (&) im folgenden CSS aus Twitter Bootstrap ?

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

Das ist WENIGER , nicht CSS.

Mit dieser Syntax können Sie Nest-Selektor-Modifikatoren verschachteln.

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

Wird kompiliert zu:

.clearfix:before {
  content: '';
}

Mit dem &kompilieren die verschachtelten Selektoren zu .clearfix:before.
Ohne sie kompilieren sie zu .clearfix :before.

Ein verschachteltes &Element wählt das übergeordnete Element in SASS und LESS aus. Es ist nicht nur für Pseudoelemente, es kann mit jeder Art von Selektor verwendet werden.

z.B

h1 {
    &.class {

    }
}

ist äquivalent zu:

h1.class {

}

Hier ist ein SCSS / LESS-Beispiel:

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

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

und sein Äquivalent in CSS:

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

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