元素和修饰符的通用样式

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

您将两个 class 都应用于元素：

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

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

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

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

元素和修饰符的通用样式

Common styles for elements and modifiers

sass

bem