Ampersand (&) at the end, and part of, a selector in SASS

For Sass versions 3.2 and older, these are all of the valid ways to use the parent selector:

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

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

As of Sass 3.3, this is valid:

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

As of Sass 3.4, this is valid:

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

Leave a Comment