元素和修饰符的常用样式答案

【问题标题】：Common styles for elements and modifiers元素和修饰符的常用样式
【发布时间】：2018-01-26 00:55:52
【问题描述】：

如果我有：

.control-button {
  border: 1px solid red;

  &--primary {
    color: blue;
  }
  &--secondary {
    color: white;
  }
}

如何确保在两个按钮类中都设置了边框？现在它会生成以下css：

.control-button {
  border: 1px solid red;
}
.control-button--primary {
  color: blue;
}
.control-button--secondary {
  color: white;
}

【问题讨论】：

标签： sass bem

【解决方案1】：

你将两个类都应用到元素上：

<button class="control-button control-button--primary">Primary button</button> <button class="control-button control-button--secondary">Secondary button</button>

块类定义了任何共享的样式和修饰符类可以用来覆盖或扩展它。

【讨论】：

是的，但假设我不能或我不想。我如何优雅地在 scss 中做到这一点？有一种方法可以获得一个通用的 mixin，但这又重复了一些事情
是的，你可以创建一个 mixin 或使用 @extend 在 CSS 类之间共享一堆公共属性，但是你并没有真正正确地使用 BEM。上面的方法非常强大，因为您显然可以组合任意数量的修饰符。
出于兴趣，你为什么不能或不会？
好吧，a) 我有学术好奇心，如果这在某种程度上可行 b) 我的同事正在研究页面的行为和标记部分，我必须处理样式，我们正在并行工作，我无法更改标记，我有它的基本脚手架
我认为，如果您想充分利用 BEM 或其他基于组件的 CSS 方法，您将需要对添加到标记中的 CSS 类进行更多控制。我认为这是您作为样式所有者的职责的一部分。

【解决方案2】：

这似乎可以使用字符串插值：

.control-button {
  $c: &;              // store classname as a var

  border: 1px solid red;

  &--primary {
    @extend #{$c};

    color: blue;
  }
  &--secondary {
    @extend #{$c};

    color: white;
  }
}

生成以下css：

.control-button, .control-button--primary, .control-button--secondary {
  border: 1px solid red;
}
.control-button--primary {
  color: blue;
}
.control-button--secondary {
  color: white;
}

它有效，但是这可能，可以说是一种愚蠢的方式。让事情变得有点神秘。但这是可能的。

【讨论】：