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

Question

I have a problem I\'m struggling with. I have this mixin (which is an attempt to port some less to sass ):

@mixin button-variant($color, $background, $borde         


        

Answer 1

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;
    }
}