How to use extend in your SASS code
Share
There are times when you want a certain element to have the same properties or CSS rules as another element. In order to avoid repeating codes, you can use the SASS extend.
Syntax
@extend [selector]
The [selector] referred to above could be a class selector, an ID selector, or an element.
Example
Take a look at the following example. We created two selectors. The second inherits the CSS rules of the first, and the latter adds its own CSS rules to the inherited ones.
.bg{width: 50%;margin:auto;}.bg-danger{@extend .bg;background-color: red;}
When we run the code, the output tells us that we can use SASS extend to inherit CSS rules from other elements. The elements that apply to both selectors are the width and the margin, and the element that is specific to .bg-danger is the background-color.
Thanks for reading!
TRENDING TOPICS
