Sass (stylesheet Language) - Selector Inheritance

Selector Inheritance

While CSS3 supports the Document Object Model (DOM) hierarchy, it does not allow selector inheritance. Inheritance is done by inserting a line inside of a code block that uses the @extend keyword and references another selector. The extended selector's attributes are applied to the calling selector.

.error { border: 1px #f00; background: #fdd; } .error.intrusion { font-size: 1.3em; font-weight: bold; } .badError { @extend .error; border-width: 3px; }

Would compile to:

.error, .badError { border: 1px #f00; background: #fdd; } .error.intrusion, .badError.intrusion { font-size: 1.3em; font-weight: bold; } .badError { border-width: 3px; }

Sass supports multiple inheritance.