August 05, 2019

@extend is a powerful SASS tool that helps keep your code nice and dry, but it can have drawbacks if used incorrectly. Calling @extend on a class or placehodler will add the extended class to the extending class’ selector list. Take this example:

.message { border : 1px solid black ; color : black ; padding : 10px 5px ; } .success { @extend .message ; border-color : green ; } .warn { @extend .message ; border-color : yellow ; } .fail { @extend .message ; border-color : red ; }

We create a .message class, and extend it across a few more classes with only a change to the border-color . When compiled, we get:

.message, .success, .warn, .fail { border : 1px solid black ; color : black ; padding : 10px 5px ; } .success { border-color : green ; } .warn { border-color : yellow ; } .fail { border-color : red ; }

Great! We’ve got an extremely effecient, dry output. However, using @extend improperly can leave a massive trail of selectors you just don’t need. For example:

.foo { .bar { .message { color : black ; border : 1px solid black ; padding : 10px 5px ; } } } .baz { .buzz { .error { @extend .message ; border-color : red ; } } }

Will result in:

.foo .bar .message, .foo .bar .baz .buzz .error, .baz .buzz .foo .bar .error { color : black ; border : 1px solid black ; padding : 10px 5px ; } .baz .buzz .error { border-color : red ; }

Yikes. Is it even worth the trouble?