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

Question

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

• 我想使用 Bootstrap 的默认按钮样式，而不是创建新的样式
• 我想保留引导程序 .scss 文件不变

我目前有自己的main.scss，它会覆盖颜色等，然后​​导入引导 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 文件中声明的类，请务必将该文件导入到您的文档中。