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:





Please Share

facebook twitter google plus pinterest tumbler

Latest 4 Tutorials