Javatpoint Logo
Javatpoint Logo

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.

SCSS Syntax:

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:

CSS Syntax:

Youtube For Videos Join Our Youtube Channel: Join Now


  • Send your Feedback to

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA