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中删除扩展名。

typeSelected

使用sass扩展占位符和其他类

1 个答案: