How to use reference to parent selector in mixin without compiling to cascade?

Question

Sass

There is a mixin:

=notification-color($elem-class
  @each $color-postfix in green, yellow, red
    .#{$elem-class}_#{$color-postfix}
      color: $color-postfix

which is used like this

.widget-content__icon
  font-size: 3em
+notification-color(".widget-content__icon")

The output is the following

.widget-content__icon {
  font-size: 3em; }

.widget-content__icon_green {
  color: green; }

.widget-content__icon_yellow {
  color: yellow; }

.widget-content__icon_red {
  color: red; }

And I would like it to work the same way without directly passing the string argument to the mixin. Is this possible? (e.g. using +notification-color(&) compiles using a cascade)

.widget-content__icon {
  font-size: 3em; }
  .widget-content__icon .widget-content__icon_green {
    color: green; }
  .widget-content__icon .widget-content__icon_yellow {
    color: yellow; }
  .widget-content__icon .widget-content__icon_red {
    color: red; }

Answer 1

Use the @at-root directive in your mixin:

@mixin notification-color($elem-class) {
  @each $color-postfix in green, yellow, red {
    @at-root #{$elem-class}_#{$color-postfix} {
      color: $color-postfix;
    }
  }
}

.widget-content__icon {
  font-size: 3em;
  @include notification-color(&);
}

The output will be:

.widget-content__icon {
  font-size: 3em;
}
.widget-content__icon_green {
  color: green;
}
.widget-content__icon_yellow {
  color: yellow;
}
.widget-content__icon_red {
  color: red;
}