Демистификация амперсанда (&) в селекторах псевдоэлементов CSS

Сталкиваясь с подобным кодом в CSS, естественно задаться вопросом о значении амперсанда (& ) символ:

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

Однако важно отметить, что этот синтаксис не является частью CSS. Вместо этого он принадлежит препроцессору CSS под названием LESS.

LESS позволяет вкладывать модификаторы селектора, используя символ амперсанда. Это позволяет вам писать краткий и читаемый код, избегая повторений. Например:

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

Это будет скомпилировано в:

.clearfix:before {
  content: '';
}

Амперсанд гарантирует, что вложенные селекторы скомпилируются в .clearfix:before. Без него они скомпилировались бы в .clearfix :before, что привело бы к недопустимому селектору CSS.

В приведенном вами примере Twitter Bootstrap амперсанд используется для применения стилей к псевдоэлементам (::before и ::after), которые создаются как дочерние элементы элемента .clearfix. Это позволяет вам кратко определять эти псевдоэлементы и поддерживать модульную структуру в CSS.