使用带有附加类的 sass 扩展占位符

Question

我为默认按钮制作了这个 sass 占位符，应该还有其他按钮，例如成功或危险按钮。

简而言之，这是我的 sass 占位符：

%button {
  border: none;
  background-color: $default-color;
  cursor: pointer;
  color: $default-color-text;
}

%button-danger {
  @extend %button;
  background-color: $default-color-danger;
  color: $default-color-danger-text;
}

%button-success {
  @extend %button;
  background-color: $default-color-success;
  color: $default-color-success-text;
}

现在我想从这些按钮进行扩展，并制作一个元素，其中包含一个类到一个按钮，以及一个附加类到一个危​​险/成功按钮。

.button {
  @extend %button;

  &.danger {
    @extend %button-danger;
  }

  &.success {
    @extend %button-success;
  }
}

结果是

.button.danger, .button.success, .button {
  border: none;
  background-color: #a0a0a0;
  cursor: pointer;
  color: #ffffff; }

.button.danger {
  background-color: #d9534f;
  color: #fff; }

.button.success {
  background-color: #5cb85c;
  color: #fff; }

没错，但我想到了很多不同的按钮，可能会有更短的方式：

.button { /* only one class in this directive */
  border: none;
  background-color: #a0a0a0;
  cursor: pointer;
  color: #ffffff; }

.button.danger {
  background-color: #d9534f;
  color: #fff; }

.button.success {
  background-color: #5cb85c;
  color: #fff; }

有没有办法编译这个结果，还是不推荐？

Answer 1

您可以从 %button-danger 和 %button-success 中删除扩展。

%button {
  border: none;
  background-color: white;
  cursor: pointer;
  color: white;
}

%button-danger {
  background-color: red;
  color: red;
}

%button-success {
  background-color: green;
  color: green;
}


.button {
  @extend %button;

  &.danger {
    @extend %button-danger;
  }

  &.success {
    @extend %button-success;
  }
}