Question

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

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

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

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

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

但是我根本不想定义抽象类%knob，是否可以在其修饰符{{}中引用/包含__knob中定义的属性（在本例中为宽度和高度） 1}}和--red？

我在这里包括sassmeister片段，以帮助解决一下：http://sassmeister.com/gist/58b5b4673a18ecadbba7

这里的示例可能看起来不像是一个问题但是如果一个具有长类名的元素具有两个或更多不同的修饰符组，并且我不会创建一个抽象类，我有时会得到像这样的{{1}的html标签我觉得不太理想。

我想要实现的目标：

引用父元素会让我将此字符串缩减为--blue，而无需声明抽象<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>元素（http://sassmeister.com/gist/bc49e0885342e96a8fbd）中声明一个抽象类给出了这个结果：

%knob

而非期望的

__door

并声明将在其范围之外使用的抽象类使得代码不易读取

或者也许我可以使用不同的apporach来使我的代码更具可读性/可维护性？

Answer 1

在搜索我的问题的答案时，我得出的结论是继承父元素属性/使用@extend或@include在这里可能不是最好的主意，因为它只有在一个元素最多有1个修改时才能正常工作：

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

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

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

我想要实现的目标：

为什么我在这里使用抽象类犹豫不决：

1 个答案: