sass - 是否有 SCSS 'no-op' 选择器？

Question

在 Sass/SCSS 中，有没有办法像这样包装现有规则：

.foo {
  color: red;
}

产生这样的输出：

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

?

我知道您可以使用父选择器来完成此操作：

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

但这需要修改现有规则。理想情况下，你可以从根本上做一些像这样神奇的事情：

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

（我已经尝试过@at-root，但这在列表选择器中不起作用，并且只是一个＆符号&在根目录中不起作用）

标签： sass

Answer 1

如果你想包装一个类而不修改它，你需要创建一个从该类扩展的 mixin。

我在这里创建的 mixin 允许将列表作为参数传递，以便放置多个选择器。

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