MENU


extend

Sass supports some 'inheritance' capabilities.
You may @extend and chain multiple selectors.
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention:hover {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention:hover;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

.error, .seriousError, .criticalError { border: 1px #f00; background-color: #fdd; } .attention:hover, .seriousError, .criticalError { font-size: 3em; background-color: #ff0; } .seriousError, .criticalError { border-width: 3px; } .criticalError { position: fixed; top: 10%; bottom: 10%; left: 10%; right: 10%; }
Placeholder selectors, prefixed with %, won't generate its CSS. !optional suppresses any error messages.
// This ruleset won't be rendered on its own.
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

a.notice {
  @extend %extreme;
}

p.notice {
  @extend %extreme !optional;
}

#context a.notice { color: blue; font-weight: bold; font-size: 2em; }

Note that selector sequences (such as .foo .bar or .foo + .bar) and selectors within a different @media block currently can't be extended.