使用 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 文件中声明的类，请确保将该文件导入到您的文档中。