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。

我在这里创建的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;
}

是否有SCSS＆＃39; no-op＆＃39;选择？

1 个答案: