Есть ли в SCSS «неоперативный» селектор?

Question

В Sass / SCSS, есть ли способ обернуть существующее правило, подобное этому :

.foo {
  color: red;
}

, чтобы получить такой результат:

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

?

Я знаю, что для этого можно использовать родительский селектор:

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

, но для этого необходимо изменить существующее правило.В идеале было бы нечто магическое, подобное этому, которое вы могли бы сделать в корне:

@noop,
.bar {
  .foo {
    color: red;
  }
}

(я пробовал @at-root, но это не работает в селекторах списков, а только в амперсанде & не работает в корне)

Answer 1

Если вы хотите обернуть класс, не изменяя его, вам нужно создать миксин, который выходит из этого класса.

Миксин, который я создал здесь, позволяет передавать список в качестве параметра, чтобы поместить несколькоселекторы.

@mixin wrap($content){
  @if (type-of($content) == string){
    & #{$content} {
      @extend #{$content};
    }
  }@else if (type-of($content) == list){
    @each $class in $content{
      & #{$class} {
        @extend #{$class};
      }
    }
  }
}

.red {
  color: red;
}
.blue {
  color: blue;
}

.wrap-1{
  @include wrap('.red' '.blue');
}

.wrap-2{
  @include wrap('.red');
}

Выходы:

.red, .wrap-2 .red, .wrap-1 .red {
  color: red;
}

.blue, .wrap-1 .blue {
  color: blue;
}