Harry Roberts wrote a great post on CSS Wizardry about the distinction between @extend
and @mixin
:
Only use @extend when the rulesets that you are trying to DRY out are inherently and thematically related. Do not force relationships that do not exist: to do so will create unusual groupings in your project, as well as negatively impacting the source order of your code.
Use a mixin to either inject dynamic values into repeated constructs, or as a Sassy copy/paste which allows you to repeat the same group of declarations throughout your project whilst keeping a Single Source of Truth.
I completely agree with it. In real life, that means I almost never use @extend
s. If you have a lot of elements that share the same styles for a reason, you should probably make it a class on its own.