如何覆盖 class 而不使用 CSS 属性？

Question

假设我有文件 _buttons.scss :

.btn {
  display: inline-block;
  font-family: $btn-font-family;
  font-weight: $btn-font-weight;
  color: $body-color;
  text-align: center;
  text-decoration: if($link-decoration == none, null, none);
  white-space: $btn-white-space;
}

现在在我的覆盖文件 'buttons.scss' 中，我想删除 color 并添加我的自定义字体系列和粗细：

.btn {
      font-family: $custom-font-family;
      font-weight: $custom-font-weight;
}

现在，如果我想在 <a> 上使用 .btn class，它仍然会采用 .btn class 的颜色Bootstrap 因为生成的 CSS 文件而不是 <a> 定义的颜色。

例如在html中：

<a href="#" class="btn btn-sm dropdown-toggle" data-toggle="dropdown">Attachment <span class="badge" data-bind="text: Documents().length">1</span></a>

我该如何预防？

编辑：编译后的 css 将类似于：

.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
}

.btn {
  font-family: "Segoe UI", "Segoe UI Light", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 200;
}

所以，它仍然会为来自 bootstrap.

的 .btn class 使用 #212529 颜色

Answer 1

将 !important 添加到您的 CSS 属性应该会有所帮助。

About !import on w3schools.

.btn {
  font-family: $custom-font-family !important;
  font-weight: $custom-font-weight !important;
}

Answer 2

您必须手动将颜色设置为“未设置”

.btn {
  font-family: $custom-font-family;
  font-weight: $custom-font-weight;
  color: unset; /* or "inherit" or whatever, based on your needs */
}

这是覆盖 CSS 属性的正确方法，注意您可能需要 !important 遵循基于您的 CSS 框架的 CSS 规则需要。换句话说，如果您不能按加载顺序工作，则需要指定 !important（如果可以就不要）:)

如果您没有像现在这样指定颜色，您只是覆盖其他属性并保留颜色

Answer 3

手动设置颜色“未设置”颜色

.btn {
  font-family: "Segoe UI", "Segoe UI Light", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 200;
  color: unset
}

如何覆盖 class 而不使用 CSS 属性？

How to override a class to not use a CSS property?

css

sass

twitter-bootstrap

bootstrap-4