Как использовать ссылку на родительский селектор в миксине, не компилируя в каскад?

Question

[ffklffkl]

Есть миксин:

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

который используется так

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

На выходе получается следующее

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

.widget-content__icon_green {
  color: green; }

.widget-content__icon_yellow {
  color: yellow; }

.widget-content__icon_red {
  color: red; }

А хотелось бы, чтобы получалось так же без прямой передачи аргумента-строки в миксин. Возможно ли это?(например с помощью +notification-color(&) компилируется с использованием каскада)

.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

[bob_cody]

Используйте директиву @at-root в миксине:

@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(&);
}

На выходе получится:

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

Comments

[ffklffkl]

Спасибо