Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 697
Dan Tao Avatar asked Aug 02 '12 23:08

Dan Tao


People also ask

Does Sass support multiple inheritance?

The @extend feature of Sass allows classes to share a set of properties with one another. In complicated CSS where many classes are put together, duplication of properties may occurs. The @extend features makes your code less and facilitates you to rewrite it repeatedly.

How use Sass variable in another file?

To use variables across multiple files in SASS is carried out by @import rule of SASS. @import rule which import Sass and CSS stylesheets for providing variables, @mixins and functions. Such that combine all stylesheets together for compiled css. It also imports URL such as frameworks like Bootstrap etc..

What does @extend do in Sass?

Sass @extend Directive The @extend directive lets you share a set of CSS properties from one selector to another. The @extend directive is useful if you have almost identically styled elements that only differ in some small details.


2 Answers

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; } 
like image 170
agustibr Avatar answered Sep 30 '22 16:09

agustibr


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

like image 24
Mark Ernst Avatar answered Sep 30 '22 17:09

Mark Ernst