使用SASS / SCSS扩展和覆盖现有样式

Question

我正在使用sass bootstrap 3.我想让我的按钮使用与我身体不同的字体。但是按钮从body继承它们的字体。

• 我想使用Bootstrap的默认按钮样式，而不是创建新的
• 我想保留bootstrap .scss个文件

我目前拥有自己的main.scss，它会覆盖颜色等，然后​​导入bootstrap scss。像这样：

$border-radius-small:            0px;

@import 'sass-bootstrap/lib/bootstrap';

现在，我目前在导入之后会有：

.demibold {
  font-family: 'The Message DemiBold';
}

但是我必须按下这样的按钮：

<button id="loginButton" type="button" class="btn btn-primary btn-lg demibold">

我是否可以向main.scss添加内容以更改例如btn的定义，因此我无需为每个按钮添加demibold样式。

Answer 1

尝试使用sass @extend关键字。

.btn {
  @extend .demibold;
}

此技术广泛用于以下模式： https://coderwall.com/p/wixovg

我倾向于自己有时使用它，但不要随意使用它，使用带有大量嵌套sass文件的@extend会导致长时间的css选择器。

编辑：如果要扩展在另一个sass文件中声明的类，请务必将该文件导入到文档中。