sass 继承所述元素属性的 bem 元素修饰符

Question

我知道 sass 为我们提供了 @extend 方法，允许我这样做：

%knob {
  width: 10px;
  height: 10px;
}

.house {
  &__door {
    &__knob {
      color: inherit;
      @extend %knob;

      &--red {
        @extend %knob;
        // 
        color: red;
      }

      &--blue{
        @extend %knob;
        // 
        color: blue;
      }
    }
  }
}

但是我根本不想定义抽象 class %knob，是否可以 reference/include 在 __knob 中定义的属性（宽度和高度在这个case) 来自其修饰符 --red 和 --blue?

我在此处包括 sassmeister 片段以提供帮助：http://sassmeister.com/gist/58b5b4673a18ecadbba7

此处的示例可能看起来不是问题，但如果具有长 class 名称的元素具有 2 个或更多不同的修饰符组，并且我不会创建抽象 class，我有时会结束html 标签看起来像这样 <p class="some other classes some-house__some-door__some-knob some-house__some-door__some-knob--red">example</p> 我觉得不太理想。

我想达到的目标：

引用父元素可以让我将这个字符串缩减为 <p class="some other classes some-house__some-door__some-knob--red"></p> 而无需声明抽象 %knob class

为什么我对在这里使用摘要 class 犹豫不决：

在 __door 元素 (http://sassmeister.com/gist/bc49e0885342e96a8fbd) 内声明一个抽象 class 给我这个结果：

.house__door .house__door__knob, .house__door .house__door__knob--red, .house__door .house__door__knob--blue {
  width: 10px;
  height: 10px;
}

而不是期望的

.house__door__knob, .house__door__knob--red, .house__door__knob--blue {
  width: 10px;
  height: 10px;
}

并在将要使用的范围之外声明一个抽象 class 会降低代码的可读性

或者也许我可以使用不同的方法来使我的代码更加 readable/maintainable?

Answer 1

在搜索我的问题的答案时，我得出的结论是继承父元素属性/在此处使用@extend 或@include 可能不是最好的主意，因为只有当元素在大多数：

在其他情况下，如果多个修改扩展相同的模型，并且要用于相同的 html 元素，则所有基本属性将被声明多次

也根本不需要深度嵌套元素（即 foo__bar__baz）。分离元素使代码更易于维护。

sass 继承所述元素属性的 bem 元素修饰符

sass bem element modifier inheriting said elements properties

css

sass

bem

我想达到的目标：

为什么我对在这里使用摘要 class 犹豫不决：