SCSS：将元素添加到现有规则答案

【问题标题】：SCSS: Add element to existing ruleSCSS：将元素添加到现有规则
【发布时间】：2013-10-22 15:38:46
【问题描述】：

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

#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;
}

有可能吗？

【问题讨论】：

不，不可能直接扩展#element1.sub-element2child 的属性，你可以将@extend #element1扩展为element2。而且你的问题不清楚..

标签： html css sass

【解决方案1】：

你可以使用 mixin。您可以将规则添加到 mixin，然后将 mixin 包含在您想要的位置：

@mixin redcolor {
    color:red;
}

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

.subelement2, #element2 {
    @include redcolor;
}

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

【讨论】：

【解决方案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.

【讨论】：