.message {
border: 1px solid #000;
font: 11px / 1.5 sans-serif;
}.error {
&:extend(.message);
background: #ffd1d1;
border-color: #f00;
}.warning {
&:extend(.message);
background: #ffc;
border-color: #fc0;
}Herewe’vedecidedtoextendthe.messageclassstylesto.errorand.warning.
Aftercompiling,wegetthefollowingCSSoutput:.message,
.error,
.warning {
border: 1px solid #000;
font: 11px / 1.5 sans-serif;
}
.error {
background: #ffd1d1;
border-color: #f00;
}
.warning {
background: #ffc;
border-color: #fc0;
}Unlikeamixin,extendingaclassmeansthattheextendedselectorwillbecombined
withtheextendeeintoacomma-separatedgroup.Here.message,.error,and
.warningsharearuleset.Mixins,ontheotherhand,copydeclarationsacrossrule
sets.WithLess,we’renotjustlimitedtoextendingclassnames.WecanextendIDselect-
orssuchas#display,childselectorssuchasnav > ul,andevenpseudo-classse-
lectorssuchasnth-child().346 CSS Master