Esperluette (&) dans les sélecteurs SASS

Dans SASS, l'esperluette (&) a une signification particulière lorsqu'elle est utilisée dans les sélecteurs. Comme le démontre l'exemple de mixin fourni, il peut être utilisé pour ajouter une partie du sélecteur parent à un sélecteur enfant.

Pour les versions Sass jusqu'à 3.2, la syntaxe suivante est acceptable :

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

De plus, cette syntaxe est prise en charge :

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

À partir de Sass 3.3, la syntaxe suivante est valide :

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

Enfin, Sass 3.4 introduit une approche alternative :

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

En utilisant ces techniques, vous pouvez générer dynamiquement des sélecteurs enfants qui incluent des parties du sélecteur parent. Ceci est particulièrement utile lors de la création de mixins pouvant être appliqués à différentes classes parents.