E comercial (&) em seletores SASS

No SASS, o e comercial (&) tem um significado especial quando usado em seletores. Conforme demonstrado no mixin de exemplo fornecido, ele pode ser empregado para anexar parte do seletor pai a um seletor filho.

Para versões Sass até 3.2, a seguinte sintaxe é aceitável:

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

Além disso, esta sintaxe é suportada:

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

A partir do Sass 3.3, a seguinte sintaxe é válida:

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

Finalmente, o Sass 3.4 introduz uma abordagem alternativa:

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

Ao utilizar essas técnicas, você pode gerar dinamicamente seletores filhos que incluem partes do seletor pai. Isto é particularmente útil ao criar mixins que podem ser aplicados a diferentes classes pai.