Using the @extend
keyword in SASS can be a little bit 'dangerous', as it often creates slightly unexpected outcomes. As an example, consider the following:
.foo { color: red; } .footer .foo { font-weight: bold; } .bar { @extend .foo; }
Compiles to:
.foo, .bar { color: red; } .footer .foo, .footer .bar { font-weight: bold; }
Using @extend extends every instance of the extended class. This can mean that you accidentally extend a class and create unwanted definitions, or even have a good solution now, but one that is unmaintainable and breaks elsewhere.
Thus a good rule of thumb is to only extend placeholder selectors, marked with a %
. This provides a more predictable output when using @extend
.
Personally, I prefer to use mixins most of the time, which are a bit more declarative IMO.
https://csswizardry.com/2014/01/extending-silent-classes-in-sass/ https://webinista.com/updates/dont-use-extend-sass/