Амперсанд (&) в селекторах SASS

В SASS амперсанд (&) имеет особое значение при использовании в селекторах. Как показано в приведенном примере миксина, его можно использовать для добавления части родительского селектора к дочернему селектору.

Для версий Sass до 3.2 допустим следующий синтаксис:

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

Кроме того, поддерживается следующий синтаксис:

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

Начиная с Sass 3.3, допустим следующий синтаксис:

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

Наконец, в Sass 3.4 представлен альтернативный подход:

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

Используя эти методы, вы можете динамически создавать дочерние селекторы, включающие части родительского селектора. Это особенно полезно при создании примесей, которые можно применять к различным родительским классам.