css - 使用 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

我自己有时会使用它，但不要随意使用它，将@extend 与大量嵌套的 sass 文件一起使用会导致 CSS 选择器过长。

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