Andrew's Digital Garden

Extending in SASS

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/

[[css]]

Extending in SASS