Why You Should Avoid Sass @extend

About a year ago, I wrote Mixin or Placeholder (my first article here at SitePoint) immediately followed by What Nobody Told You About Sass Extend. And here I am, one year later, changing my mind again and writing why I think the @extend directive from Sass is really far from being the Eldorado.

TL;DR: Extending is invisible. Extending doesn't necessarily help file weight, contrary to the saying. Extending doesn't work across media queries. Extending is not flexible. Mixins have absolutely no drawback.

But first, I should probably give you a little reminder. @extend is a Sass feature aiming at providing a way for a selector A to extend the styles from a selector B. When doing so, the selector A will be added to selector B so they both share the same declarations. For instance:

[code="sass"] .selector-A { @extend .selector-B; unicorn: true; } .selector-B { rainbow: true; } [/code]

This Sass snippet will yield this CSS:

[code="css"] .selector-A { unicorn: true; } .selector-B, .selector-A { rainbow: true; } [/code]

That is pretty much all you need to know about @extend to fully appreciate this article so now that we've covered the basics, it's time to move on. There are quite a few reasons why I think @extend is a deceptive feature.

However worry not, this is not yet another article about how "Sass @extend can output outrageously long selectors if you're messing with it". Let's try to dig deeper than that, shall we?

Continue reading %Why You Should Avoid Sass @extend%

by Hugo Giraudel via SitePoint