112

The question pretty much says it all.

For instance, if I were using, say, Twitter Bootstrap, could I define classes in my own SASS stylesheet that inherit from Bootstrap's CSS classes? Or does inheritance in SASS only work within the scope of a single file?

agustibr
  • 2,146
  • 1
  • 13
  • 8
Dan Tao
  • 125,917
  • 54
  • 300
  • 447

4 Answers4

201

YES! its possible.

If you want all <button> elements to inherit the .btn class from Twitter Bootstrap's Default buttons

In your styles.scss file you would have to first import _bootstrap.scss:

@import "_bootstrap.scss";

Then below the import:

button { @extend .btn; }
agustibr
  • 2,146
  • 1
  • 13
  • 8
  • I feel bad for doing this since the other answers pretty much answered this question (I just neglected to check back for a while and then forgot); but I'm accepting your answer because it is the most complete—i.e., it walks me through the whole process. Thanks! – Dan Tao Mar 07 '13 at 22:02
  • 4
    Does this only work with other SCSS files? Can you not do this with CSS files? – crush Jan 23 '15 at 21:12
  • 1
    Be careful when you use `@extend` together with bootstrap/any framework, as it may not work as you expect. There are some things to be aware of as outlined in this post: http://stackoverflow.com/questions/30744625/sass-and-bootstrap-mixins-vs-extends/30744854#30744854 – Patrik Affentranger Oct 28 '15 at 03:35
  • 4
    But doesn't this duplicate the CSS from bootstrap.scss, if you do that in multiple files in your project? – fritzmg Nov 06 '15 at 09:00
  • 3
    Does this import the entire `bootstrap.css` into `styles.css` or just `.btn`? I mean in the output bundle? If it imports entire `bootstrap.css`, it will increase the size of `styles.css` unnecessarily. – darKnight Aug 02 '19 at 08:30
  • The `@import` is not recommended anymore. From the project's page: "The Sass team discourages the continued use of the `@import` rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the `@use` rule instead." – Alexandre V. Apr 21 '20 at 19:01
  • extending another `@extend .classname` is also discouraged. SCSS is getting very confusing. :( – Dinesh Apr 04 '22 at 21:21
8

**I might be mistaken, but if I get what you're trying to do, can't you just use the @extend .classname; command inside the element that you'd want to extend? Naturally, you should only modify your own code to preserve updatability.

Mark Ernst
  • 184
  • 1
  • 6
2

To my knowledge, you have to use @import of the file containing the classes you want to use into your SASS file in order to utilize them in that file. However, I am not a SASS/SCSS expert, so someone may know of another way to remotely use them that I am not aware of.

ScottS
  • 71,703
  • 13
  • 126
  • 146
1

Just as the accepted answer has shown this is possible with @import, however @import has been deprecated by sass

The Sass team discourages the continued use of the @import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead.

The @use rule is better suited for use now, since it does not pollute the scope of the importing (user) module. unfortunately at the time of writing the use rule is only implemented in Dart sass.

ehab
  • 7,162
  • 1
  • 25
  • 30
  • theres a dart sass compiler that compiles sass using @use just fine. But you have to target which file you want to compile in the settings or else all files will be compiled, even if you want to combine them in one file and only compile that one. – Tobi Aug 28 '20 at 12:16