CODEWITHSUNDEEP
cssinheritancestylesheetsass
Dan Tao
Dan Tao

Reputation: 128307

Is it possible in SASS to inherit from a class in another file?

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?

Upvotes: 114

Views: 73339

Answers (4)

ehab
ehab

Reputation: 8044

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.

Upvotes: 1

agustibr
agustibr

Reputation: 2146

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

Upvotes: 201

Mark Ernst
Mark Ernst

Reputation: 313

**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.

Upvotes: 8

ScottS
ScottS

Reputation: 72261

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.

Upvotes: 2

Related Questions