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

Question

我想在我的Sass库中实现类似BEM模型的东西.但我很难找到一个干净的方法来做到这一点.

例如,我想为一个公共元素声明一个'base'样式,然后使用有用的变量扩展它:

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

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

}

这里的问题是生成的.container-featured类只包含border属性 - Sass不包含其"父"类的边距和背景.

因此,您最终必须将标记中的类加倍才能获得所需的结果:

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

是否有某种方法可以将属性从父类拉入到该修饰符类中,因此您可以在标记中引用修饰符类来获得相同的可视结果？

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

我已经尝试过使用mixins来做到这一点,但事情很快就会变得冗长和重复:

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

.container {
  @include container;

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

}

Sass是否有一种简单,干净的方法来实现这一目标？

Answer 1

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

例

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