Sass 是否有SCSS'；无op&x27；选择器？

在Sass/SCSS中，是否有任何方法可以像这样包装现有规则：

.foo {
  color: red;
}

要产生这样的输出：

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

?

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

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

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

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

---

（我在根目录下尝试了

，

，但在列表选择器中不起作用，只有一个符号

&

在根目录下不起作用）

如果您想包装一个类而不修改它，您需要创建一个从该类扩展而来的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;
}

---

使用

@mixin

如何？比如：

.foo{@include noop（'.bar'，'.baz'）{color:red；}}

输出

.foo、.bar.foo、.baz.foo{color:red；}

？嘿！与下面的注释相同，我希望根本不修改原始选择器和规则：-），但您将始终使用

.bar

硬编码。它不可重用。如果您需要多个“包装器”？那么让我们在第二个参数中传递一个列表。卓越+1:）聪明！我认为你的最新更新非常接近。就我的实际目的而言，它最终并不是。foo，而是更复杂的东西，但这是我见过的最接近的：）谢谢！