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
.
@extend [selector]
The [selector]
referred to above could be a class selector, an ID selector, or an element.
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!