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. Then use the @extend
directive to extend it. Here is the code that compiles to:
.warning-box, .success-box, .info-box { padding: 2em; color: black; background-color: white; } .warning-box { border: 2px dotted red; } .success...