Extend and override existing style with SASS/SCSS

Question

I'm using sass bootstrap 3. I'd like to make my buttons use different font than rest of my body. But buttons inherit their font from body.

• I'd like to use the default button styles of Bootstrap, not create new ones
• I'd like to leave the bootstrap .scss files intact

I currently have my own main.scss which overrides colors etc. and then imports the bootstrap scss. Like this:

$border-radius-small:            0px;

@import 'sass-bootstrap/lib/bootstrap';

Now, currently I have after the import something like:

.demibold {
  font-family: 'The Message DemiBold';
}

But then I have to have my buttons like this:

<button id="loginButton" type="button" class="btn btn-primary btn-lg demibold">

Can I add something to my main.scss to change the definition of for example btn so I don't need to add demibold style to each button.

Answer 1

Try the sass @extend keyword.

.btn {
  @extend .demibold;
}

This technique is used extensively in the following pattern: https://coderwall.com/p/wixovg

I tend to use it myself sometimes, but don't go wild with it, using @extend with heavily nested sass files can lead to insanly long css selectors.

edit: If you are going to extend a class declared in another sass file, be sure to import that file into your document.