sass Extend / Inheritance Chaining Extends


Example

.message
  color: white
  background: black

.message-important
  @extend .message
  font-weight: bold

.message-error
  @extend .message-important
  font-style: italic

This code causes .message-error to extend from .message-important, which means that it will contain code from both .message-important and .message, since .method-important extends from .message. This results in the following CSS:

.message, .message-important, .message-error {
  color: white;
  background: black;
}

.message-important, .message-error {
  font-weight: bold;
}

.message-error {
  font-style: italic;
}

Disclaimer: Make sure that the class(es) you are extending from occur only once in the code, otherwise Sass may generate some messy, convoluted CSS.