sass Extend / Inheritance Chaining Extends


  color: white
  background: black

  @extend .message
  font-weight: bold

  @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.