代码之家 › 专栏 › 技术社区 › Roman Nurik

是否有SCSS“禁止操作”选择器?

sass

Roman Nurik · 技术社区 · 8 年前

在sass/scss中,有没有办法 这样包装现有规则 :

.foo {
  color: red;
}

要产生这样的输出:

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

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

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

但这需要修改现有的规则。理想情况下,你可以在根上做这样的神奇的事情:

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

(我试过了 @at-root 但这在列表选择器中不起作用,而只是一个与号 & 根本不起作用)

1 回复 | 直到 8 年前

llobet 8 年前

如果要包装类而不修改它,则需要创建从该类扩展的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;
}

推荐文章

ineedtoknow · 如何以重复模式(蓝色、紫色、红色)为儿童应用背景色[重复]

1 年前

user p · 如何修复Angular Material侧边栏的滚动问题

1 年前

Samvel · 无法通过sass模块编译scss文件

2 年前

Frankey · :not()CSS伪类未按预期工作

2 年前

Patrick Kenny · 如何将全局SCSS文件添加到Svelte/SvelteKit?

2 年前

Ch. · scs中@media的误导最小宽度和最大宽度

2 年前

Yiu Chak · 错误:“…m 55%在右侧”后无效CSS

2 年前

Sudeepa T · 无法定位元素[重复]

2 年前

kold-kreator · 编辑Bootstrap 5卡盒阴影的SASS

2 年前

JuliaBland299 · 如何使链接不占用网格中的空间?

2 年前