Kevin ClarkUX Director, Shopify
23.11.14

When to Use a Extend / When to Use a Mixin

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 @extends. 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.