Native CSS Mixins?

CSS Mixins, What are they?

Quick summary, CSS mixins (and includes) are a concept that comes from SASS. It allows you to deduplicate CSS, essentially making your own functions that you can call when you are styling classes. An example of a mixin is as follows:

@mixin my-mixin {
    color: white;
    background-color: grey;
    padding: 1rem;
    margin: 0;
    border: 4px solid pink;
}

Now to use that mixin, you would have to use have to include it in a class declaration such as:

/* sole purpose of selector */
h1 {
    @include my-mixin;
}

/* with other css properties */
h5 {
    @include my-mixin;
    text-decoration: underline;
    text-underline-offset: 0.5rem;
    text-transform: capitalize;
}

Once compiled by SASS you would have an output (comments for demonstrative purposes) that looks something like:

h1 {
    /* start: from CSS mixin */
    color: white;
    background-color: grey;
    padding: 1rem;
    margin: 0;
    border: 4px solid pink;
    /* end: from CSS mixin */
}

h5 {
    /* start: from CSS mixin */
    color: white;
    background-color: grey;
    padding: 1rem;
    margin: 0;
    border: 4px solid pink;
    /* end: from CSS mixin */
    text-decoration: underline;
    text-underline-offset: 0.5rem;
    text-transform: capitalize;
}

Great, So how do I use these natively?

Glad you asked, the TLDR is by abusing CSS animations and keyframes. So to follow our example from above, lets first declare our mixin:

@keyframes my-mixin {
    from {
        color: white;
        background-color: grey;
        padding: 1rem;
        margin: 0;
        border: 4px solid pink;
    }
}

Looks like a standard CSS keyframe right? you would be correct. The “magic” comes in when you go to use the css keyframe:

/* sole purpose of selector */
h1 {
    animation: 1s paused my-mixin;
}

/* with other css properties */
h5 {
    animation: 1s paused my-mixin;
    text-decoration: underline;
    text-underline-offset: 0.5rem;
    text-transform: capitalize;
}

As you can see, we are simply calling the keyframe using a placeholder time, in our case 1s, not that it matters much. The real magic comes from the fact that we have paused for our <single-animation-play-state> parameter. You may be thinking at this point, this is all fine and dandy, but it uses CSS animations, can’t those be performance expensive? Well, I cant exactly say as I didn’t personally test it, but since the animation is paused, rather than truely running, its probably fine. For more information, have a read of this article by Mads Stoumann over on CSS-Tricks.

The Future

I’ll be the first to admit that the whole implementation is a giant “hack” and I completely would not blame you for avoiding using it :). We “recently” ¹ got CSS nesting in across browsers which traditionally was a SASS feature, so how about mixins? Well the good news is that the CSS Working Group has an issue for it, w3c/csswg-drafts#9350 and has resolved to adopt it. For further reading I would recommend taking a peak at this article over on oddbird.net to get a good summary.