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

Suppose I have the file _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;
}

And now in my override file 'buttons.scss', I want to remove the color and add my custom font family and weight:

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

Now, If I want to use the .btn class on an <a>, it will still take the color of the .btn class from Bootstrap because of the generated CSS file instead of the <a> defined color.

For example in the html:

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

How can I prevent that?

EDIT : The compiled css will be something like:

.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;
}

So, It will still use the #212529 color for the .btn class that is coming from bootstrap.

csstwitter-bootstrapbootstrap-4sass


Solution 1:[1]

set color manually the color "unset"

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

Solution 2:[2]

Adding !important to your CSS property should help.

About !import on w3schools.

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Wael Khalifa
Solution 2

Related Questions