Question

我有一些嵌套在彼此内部的规则，我想在其中一个规则中添加另一个不相关的元素。例如，如果我有

#element1{
   display: block;

   .sub-element1 {
      background: yellow;

      .sub-element2 {
      color: red;
      }
   }
}

然后我想添加另一个元素（＃element2）来使用与.sub-element2相同的规则，因此编译后的代码如下所示：

#element1{
   display:block
}
#element1 .sub-element1 {
   background:yellow
}
#element1. sub-element1 .sub-element2, #element2 {
   color: red;
}

有可能吗？

Answer 1

你可以使用mixin。您可以向mixin添加规则，然后在其中包含mixins：

@mixin redcolor {
    color:red;
}

然后只需将此mixin包含在任何选择器中：

.subelement2, #element2 {
    @include redcolor;
}

有关mixins的更多信息： http://sass-lang.com/guide

Answer 2

使用@extend。

#element2 {
  @extend .sub-element2
}

由此创建的输出也将复制选择器链，因此这将是输出：

#element1. sub-element1 .sub-element2, #element2 {
  color: red;
}

也许这就是你想要的，但我可以想象它不是。

在这种情况下，您需要编写@extend only选择器。它的工作方式与@include，非常相似，只不过它会生成您在问题中勾勒出的紧凑输出。您可以通过多种方式完成此操作，这是其中之一：

%red {
  color: red;
}

#element1{
   display: block;

   .sub-element1 {
      background: yellow;

      .sub-element2 {
        @extend %red;
      }
   }
}

#element2 {
  @extend %red;
}

Here's a link to it in the official docs

SCSS：向现有规则添加元素

2 个答案: