Ampersand (&) en selectores SASS

En SASS, el ampersand (&) tiene un significado especial cuando se usa dentro de selectores. Como se demuestra en el mixin de ejemplo proporcionado, se puede emplear para agregar parte del selector principal a un selector secundario.

Para las versiones de Sass hasta 3.2, la siguiente sintaxis es aceptable:

.foo {
    &, &.bar, &#bar, &:after, &[active] {
        color: red;
    }
}

Además, se admite esta sintaxis:

.foo {
    .bar & {
        color: red;
    }
}

Desde Sass 3.3 en adelante, la siguiente sintaxis es válida:

.foo {
    &bar, &-bar {
        color: red;
    }
}

Finalmente, Sass 3.4 introduce un enfoque alternativo:

.foo {
    $foo: &;
    @at-root bar#{&} {
        color: red;
    }
}

Al utilizar estas técnicas, puede generar dinámicamente selectores secundarios que incluyan partes del selector principal. Esto es particularmente útil al crear mixins que se pueden aplicar a diferentes clases principales.