Sass and Compass for Designers

Use placeholder selectors to extend styles only when needed

We've just looked at how the @extend directive can extend an existing rule. However, in situations when a rule is being created purely to extend it, use a placeholder selector instead. Here's our prior example written with a placeholder selector on the first rule instead:

// Box
%box {
  padding: 2em;
  color: $color10;
  background-color: $color11;
}
// Warning Box
.warning-box {
  @extend %box;
  border: 2px dotted $color1;
}
// Success Box
.success-box {
  @extend %box;
  border: 2px dotted $color4;
}
// Information Box
.info-box {
  @extend %box;
  border: 2px dotted $color7;
}

Instead of the normal selector (a period for a class or hash/pound for an ID selector), use a percentage symbol (%) instead. ...