Sass Inheritance/ Extend
In Sass, @extend is used to share a set of CSS properties from one selector to another. It is a very important and useful feature of Sass.
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.
Let's take an example to demonstrate the @extend feature. Here, we create a simple series of messaging for errors, warnings and successes.
Equivalent Sass Syntax:
When the above code is processed, it takes the CSS properties in .message and applies them to .success, .error, & .warning. The generated CSS facilitates you to avoid writing multiple class names on HTML elements. It looks like this: