Let’s back up a little bit so I can explain the context of this post. In recent weeks I have been actively comparing rendering output between mixins and placeholders. As a result, the more I think about it, the more I believe using mixins and placeholders as they are described in the Sass docs is simply not enough.
Let’s focus on the main goal here: CSS output. In this whole experiment, I am not considering code complexity or code quality. I’m only considering final CSS output. The point is to have CSS output that is as light and lean as possible.
If you’ve read my previous SitePoint articles covering placeholders vs mixins and
@extend directives, you would be aware that there are a couple of drawbacks with both features. Mixins do not merge selectors while
@extend directives are restricted to their scope, hence they are basically unusable in a responsive context with
@media blocks (which I tackled and partially solved in my article on cross-scope @extend).
Today, I would like to deal with another issue: Mixin grouping.
What is Mixin Grouping?
Mixins are really handy when you want to create shortcuts in your variable code. For instance, you could have a mixin accepting two arguments to output both
height. Or a mixin for offset positioning. That’s nice.
The problem with mixins is every time you call them, they dump CSS rule sets. If you call them twice with the same arguments from 2 different selectors, they won’t be merged into a single rule set. Instead, they will dump the same rule set twice — which kind of sucks.
For this article, we’ll deal with a very simple use case: A
size mixin to assign
height. Here is what it looks like:
Continue reading %Caching Values from Sass Mixins%