Desmistificando o E comercial (&) em seletores de pseudo-elementos CSS

Ao encontrar código como este em CSS, é natural se perguntar sobre o significado do E comercial (& ) caractere:

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

No entanto, é importante observar que esta sintaxe não faz parte do CSS. Em vez disso, ele pertence a um pré-processador CSS chamado LESS.

LESS permite aninhar modificadores de seletor usando o caractere e comercial. Isso permite que você escreva código conciso e legível, evitando repetições. Por exemplo:

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

Isso será compilado para:

.clearfix:before {
  content: '';
}

O e comercial garante que os seletores aninhados sejam compilados em .clearfix:before. Sem ele, eles seriam compilados para .clearfix :before, o que resultaria em um seletor CSS inválido.

No exemplo do Twitter Bootstrap que você forneceu, o e comercial é usado para aplicar estilos a pseudoelementos (::before e ::after) que são criados como filhos do elemento .clearfix. Isso permite que você defina esses pseudoelementos de forma concisa e mantenha uma estrutura modular dentro do seu CSS.