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

Question

3

我正在使用sass bootstrap 3。我希望我的按钮使用不同于正文的字体。但是，按钮会继承正文的字体。

我目前有自己的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样式。

- vertti

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- calumbrodie · Accepted Answer

尝试使用Sass的@extend关键字。

.btn {
  @extend .demibold;
}

这种技术在以下模式中被广泛使用： https://coderwall.com/p/wixovg 我有时也会使用它，但不要过度使用@extend与嵌套的sass文件，这样会导致css选择器非常长。

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