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.
