When to use — extends vs mixins in SASS
SASS provides two main ways to reuse styles — @extend
and mixins — this article is a brief look into how both work and which to use.
TLDR:
@extend
with/without placeholders are best when you have shared static, similar styles but they cause duplicate classes while mixins are best for dynamic styles which uses passed arguments but they lead to repeated declarations.
@extend
The extends syntax allows you to share styles between two selectors. It’s analogous to the way classes are combined in HTML.
Using @extend
, this can be written as:
The .seriousError
selector is initially grouped with the .error
selector (which contains the extended styles). The remaining .seriousError
properties are then grouped below.
But, what if you don’t need the .error
class to be compiled? Perhaps, it’s just a shared utility class/constructor? Then, you can use placeholder selectors e.g. %foo
which unlike the .error
selector above, won’t be compiled which is great for utility/shared classes that will never be used in the markup. For example:
Mixins
Mixins are quite similar to extends, for example, using mixins, we could have done this:
Like extend using placeholders, the error
mixin isn’t included in the compiled version. Unlike extend though, notice how the declarations in the error
mixin are repeated multiple times in the compiled version? Sheesh. That’s maybe not good?
Then again, this is not exactly what mixins were intended for. The true magic in mixins arise from the fact that you can pass in arguments, just like a function call. For our error mixin, we can provide different background colors for different type of errors:
Which should you use?
Like everything frontend related, it depends on your use case and the tradeoffs you require.
Generally, if you don’t have dynamic styles, using @extend (preferably using placeholders — unless you are referencing the class in the DOM) is good enough. Using mixins for static-only styles causes unnecessarily bloated stylesheets so it’s a good idea to keep the declarations minimal and only for dynamic declarations because it’s going to be duplicated.
On Composes
composes
from CSS Modules is also an interesting option and leads to duplicate classes — like @extend
— but unlike extend, these duplicated classes will be in the markup (not the stylesheet).
Examples are from the SASS documentation on @extend and mixins.
SASSMeister — Repl for SASS
- SASSMeister — Repl to experiment with SASS on the fly
- SASS Docs — All the magic of SASS can be found here with easy to use examples.