1

我知道 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从其修饰符中引用/包含在（在这种情况下为宽度和高度）中定义的属性--red和--blue？

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

此处的示例可能看起来不是问题，但是如果具有长类名的元素具有 2 个或更多不同的修饰符组，并且我不会创建抽象类，我有时会得到看起来像这样的 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类

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

__door在元素内声明一个抽象类（ http://sassmeister.com/gist/bc49e0885342e96a8fbd）给了我这个结果：

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

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

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

4

1 回答 1

0

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

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

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

于 2015-10-27T19:11:41.223 回答