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?
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.
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..
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.
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; }
**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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With