html - SCSS：将元素添加到现有规则

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，然后将 mixin 包含在您想要的位置：

@mixin redcolor {
    color:red;
}

然后简单地将这个 mixin 包含在任何选择器中：

.subelement2, #element2 {
    @include redcolor;
}

更多关于 mixin 的信息：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;
}

这是官方文档中的链接。