sass - 是否可以在扩展的 Sass 类中包含父属性？

Question

我想在我的 Sass 库中实现类似于 BEM 模型的东西。但我正在努力寻找一种干净的方法来做到这一点。

例如，我想为一个通用元素声明一个“基本”样式，然后用有用的变体对其进行扩展:

.container {
  margin: 10%;
  background: #eee;

  &-featured {
    border: 2px solid #999;
  }

}

这里的问题是生成的 .container-featured类只包含边框属性——Sass 不包含其“父”类的边距和背景。

因此，您最终不得不在标记中的类上加倍以获得所需的结果:

<div class="container container-featured">
  ...
</div>

是否有某种方法可以将父类中的属性拉到该修饰符类中，这样您只需在标记中引用修饰符类就可以获得相同的视觉结果？

<div class="container-featured">
  <!-- has margin, background, and border styles via just modifier class -->
</div>

我试过使用 混合 要做到这一点，但事情很快就会变得冗长和重复:

@mixins container {
  margin: 10%;
  background: #eee;
}

.container {
  @include container;

  &-featured {
    @include container;
    border: 2px solid #999;
  }

}

是否有一种简单、干净的方法可以使用 Sass 实现这一目标？

Answer 1

您正在寻找的是 @extend指示。 @extend允许您将一组 CSS 属性从一个选择器共享到另一个选择器。这意味着您只需要使用 container-featured类(class)。

示例

.container {
  margin: 10%;
  background: #eee;

  &-featured {
    @extend .container;
    border: 2px solid #999;
  }
}

编译为:

.container,
.container-featured {
    margin: 10%;
    background: #eee;
}

.container-featured {
    border: 2px solid #999;
}