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

Posted 2023-02-23

【中文标题】是否可以在扩展的 Sass 类中包含父属性？

【英文标题】：Is it possible to include the parent properties in an extended Sass class?

【发布时间】：2014-12-16 11:17:36

【问题描述】：

我想在我的 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 来执行此操作，但事情很快就会变得冗长和重复：

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


.container 
  @include container;

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

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

【参考方案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;

【讨论】：

确实如此，而且 CSS 代码不会很大。我编辑我的答案。

生成的 CSS 不是我所期望的，但解决方案保持不变。非常感谢，这对我来说很简单！

那么如何引用嵌套选择器呢？即container__item--mod当less写成.container &__item &--mod 或者有没有更好的嵌套方式？

【参考方案2】：

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

混合就是这样 - 在同一个 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;

【讨论】：

除了使通用容器的基本声明成为占位符而不是祖先类（这实际上似乎在方便和重用方面失去了功能），我不明白这种方法有什么好处超过科林的建议？

@markedup 不同的是，Colin 的提议只是样式继承。但我的例子是如何从 BEM 方法的角度正确地做到这一点 - 通过 mixin。为了清楚起见，这里是一个没有 Sass 的示例： ... .i-container // 抽象块样式 margin: 10%;背景：#eee; .container-featured 边框：2px 实心 #999;