Question

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

例如，我想声明一个＆＃39; base＆＃39;公共元素的样式，然后使用有用的变体扩展它：

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

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

}

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

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

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

Answer 2

Colin Bacon解决方案是问题的正确答案。但就BEM方法而言，这并不优雅。我建议你使用另一种BEM语法。

HTML：

<div class="Container featured">
  ...
</div>

SCSS：

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

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

语法：

组件名
ComponentName.modifierName
组件名-descendantName
组件名-descendantName.modifierName
ComponentName.isStateOfComponent

Answer 3

你应该在BEM中使用mixin而不是Sass！

Mixins就是这样 - 在同一个DOM节点上使用几个块和/或元素。

单个DOM节点可以表示：


几个街区b-menu b-head-menu

一个块和同一块b-menu b-menu__layout
的元素
一个块和另一个块b-link b-menu__link
的元素
不同块的元素b-menu__item b-head-menu__item

包含修饰符和另一个块b-menu b-menu_layout_horiz b-head-menu
的块
使用修饰符b-menu b-menu_layout_horiz b-head-toolbar b-head-toolbar_theme_black
的几个不同块

阅读更多内容：http://bem.github.io/bem-method/html/all.en.html，Mixin部分。

你也可以使用i-blocks（抽象块），所以你的.container将是.i-container，阅读更多：http://bem.github.io/bem-method/html/all.en.html，部分命名约定。

使用Sass，您可以将i-block实现为

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

%i-container {
  // abstract block styles
  margin: 10%;
  background: #eee;
}

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

没有Sass，BEM中的mixin如下：

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

.i-container {
  // abstract block styles
  margin: 10%;
  background: #eee;
}

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

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

3 个答案: