Extending in Sass
Conceptually,extendinginSassisthesameasextendinginLess.ExtendinginSass
alsocombinesselectorsintoasingleruleset.Syntactically,however,therearea
coupleofdifferences.
ToextendaclasswithSass,usethe@extenddirectivefollowedbytheselectoryou
wishtoextend.Let’srewriteourexamplefromtheprevioussectiontouseSass
syntax:
.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;
}ThiscreatesthefollowingCSSoutput:
.message, .error, .warning {
border: 1px solid #000;
font: 11px / 1.5 sans-serif; }.error {
background: #ffd1d1;
border-color: #f00; }Preprocessors 347