SASS Inheritance

by Online Tutorials Library July 14, 2022

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:

 .message {   border: 1px solid #ccc;   padding: 10px;   color: #333; } .success {   @extend .message;   border-color: green; } .error {   @extend .message;   border-color: red; } .warning {   @extend .message;   border-color: yellow; } 

Equivalent Sass Syntax:

.message   border: 1px solid #ccc   padding: 10px   color: #333 .success   @extend .message   border-color: green .error   @extend .message   border-color: red .warning   @extend .message   border-color: yellow  

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:

 .message, .success, .error, .warning {   border: 1px solid #cccccc;   padding: 10px;   color: #333; } .success {   border-color: green; } .error {   border-color: red; } .warning {   border-color: yellow; } 

Next TopicSass @at-root Directive

SASS Inheritance

Sass Inheritance/ Extend

Advantages and Disadvantages of RxJS

Feature of Scala

You may also like