Ampersand (&) in SASS Selectors

In SASS, the ampersand (&) has a special significance when used within selectors. As demonstrated in the example mixin provided, it can be employed to append part of the parent selector to a child selector.

For Sass versions up to 3.2, the following syntax is acceptable:

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

Additionally, this syntax is supported:

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

From Sass 3.3 onwards, the following syntax is valid:

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

Finally, Sass 3.4 introduces an alternative approach:

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

By utilizing these techniques, you can dynamically generate child selectors that include parts of the parent selector. This is particularly useful when creating mixins that can be applied to different parent classes.