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.