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:
This Sass snippet will yield this CSS:
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?
Copy and paste this URL into your WordPress site to embed
Copy and paste this code into your site to embed