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

← prev next →