Что означает "&" перед псевдоэлементом в CSS?

В следующем CSS, взятом из Twitter Bootstrap, что означает символ амперсанда (&)?

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

Ответы

Ответ 1

Это LESS, а не CSS.

Этот синтаксис позволяет вам вставлять модификаторы селектора гнезд.

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

Скомпилирует для:

.clearfix:before {
  content: '';
}

С помощью & вложенные селекторы скомпилируются в .clearfix:before.
Без него они компилируются в .clearfix :before.

Ответ 2

Вложенный & выбирает родительский элемент как в SASS, так и в LESS. Он не только для псевдоэлементов, он может использоваться с любым типом селектора.

например.

h1 {
    &.class {

    }
}

эквивалентно:

h1.class {

}

Ответ 3

In SCSS & LESS 

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

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


is Equal to in CSS :

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

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