Question

如果我有：

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

Answer 1

您将这两个类应用于元素：

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

块类定义任何共享样式，修饰符类可用于覆盖或扩展它。

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

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

元素和修饰符的常见样式

2 个答案: