Sass 图元和修改器的常用样式

如果我有：

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

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

---

将这两个类应用于元素：

主按钮
辅助按钮

---

块类定义任何共享样式，修改器类可用于替代或扩展它

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

.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 {
  border: 1px solid red;
}
.control-button--primary {
  color: blue;
}
.control-button--secondary {
  color: white;
}

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

---

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

是的，但我不能或不想这样做。我如何在SCS中优雅地做到这一点？有一种方法可以获得一个通用的mixin，但这又重复了一次。你可以创建一个mixin，或者使用

@extend

在CSS类中共享一组通用属性，但是你并没有真正正确地使用BEM。上面的方法非常强大，因为你显然可以组合任意数量的修改器。出于兴趣，为什么你不能或你不愿意？好吧，a）我有学术好奇心，如果这是可行的b）我的同事正在处理页面的行为和标记部分，我必须处理样式，我们正在并行工作，我不能改变标记，我有itI的基本框架。我想如果你想从BEM或者其他基于组件的CSS方法中获得最好的效果，你需要对添加到标记中的CSS类进行更多的控制。我认为这是你作为设计师职责的一部分。