Desmitificando el signo comercial (&) en selectores de pseudoelementos CSS

Al encontrar código como este en CSS, es natural preguntarse sobre el significado del signo comercial (& ) carácter:

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

Sin embargo, es importante tener en cuenta que esta sintaxis no forma parte de CSS. En cambio, pertenece a un preprocesador de CSS llamado LESS.

LESS le permite anidar modificadores de selector utilizando el carácter comercial. Esto le permite escribir código conciso y legible evitando repeticiones. Por ejemplo:

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

Esto se compilará en:

.clearfix:before {
  content: '';
}

El signo comercial garantiza que los selectores anidados se compilen en .clearfix:antes. Sin él, se compilarían en .clearfix :before, lo que daría como resultado un selector de CSS no válido.

En el ejemplo de Twitter Bootstrap que proporcionaste, el signo comercial se usa para aplicar estilos a pseudoelementos (::before y ::after) que se crean como hijos del elemento .clearfix. Esto le permite definir estos pseudoelementos de manera concisa y mantener una estructura modular dentro de su CSS.