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

问题

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, $border)
    {
        ...
        .foreverAlone{
            ...
        }

        .iThink .illNeverWork& {

            color: $pinkUnicornRainbow;
            ...
        }
  }

Which obviously is not working :D I would like it to generate something like:

.callerClass .foreverAlone{
    ...
} 

.callerClass .iThink .illNeverWork.callerClass{

    color: #123ABC;
    ...
}

The mixin is called inside various div classes, so it is not possible to make it static (easily).

Is there any workaround from some Sass pro (or not pro, but smarter than I am)? Thank you all for the attention and sharing your solutions.

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

来源：https://stackoverflow.com/questions/22501114/ampersand-at-the-end-and-part-of-a-selector-in-sass