CSS mixins were already possible since 2009

Just a few days ago, I was browsing through CodePen to see if there were any code examples of the new CSS Mixins when I found a CodePen created by Jason Knight that showed off a way of creating CSS Mixins using the @keyframes animations. After seeing this, I wanted to test it for myself and, if it was really interesting, share it on my blog with all of you.

What are CSS mixins?

CSS mixins are reusable blocks of styles that can be included in multiple selectors to keep your CSS code DRY (Don't Repeat Yourself). They allow you to define a set of styles once and reuse them wherever needed. SASS Mixins have been part of SASS for many years now and are now being introduced to CSS. In the future, we have one less reason to use SASS or any other CSS compiler.

How do mixins based on animations work?

When you create a CSS animation, you have to define @keyframes for all key animation points. In this case, we only need a starting point, which we can set using the from keyword. Within this, simply add the CSS needed for the mixin.

In my example, I have chosen the border mixin. The final step is to include the animation with an animation-play-state of paused and an animation-duration of 1ms. Finally, link to the @keyframes rule. That’s all. I have added a code example below.

<h1>Writing CSS is awesome!</h1>
<style>
    @keyframes mixin__border {
        from {
            border: 20px solid rebeccapurple;
        }
    }

    h1 {
        animation-duration: 1ms;
        animation-play-state: paused;
        animation-name: mixin__border;
    }
</style>​

It is even possible to add multiple mixins to a single element by simply using the animation-name attribute with multiple keys. I have extended the code a bit, as you can see below. I have added two mixins and moved the attributes animation-duration and animation-play-state into the * selector. This may cause conflicts with the existing animations on your website. If so, you might want to reset the animation-play-state to its initial value for every animation that is not a mixin.

Maybe you could even create a mixin for this. On second thought, better not—it would create a big mess.

<h1>Writing CSS is awesome!</h1>
<img src="image.jpg">

<style>
    @keyframes mixin__circle {
        from {
            border-radius: 50%;
            aspect-ratio: 1;
        }
    }

    @keyframes mixin__borderRebeccapurple {
        from {
            border: 20px solid rebeccapurple;
        }
    }

    * {
        animation-duration: 1s;
        animation-play-state: paused;
    }
    h1 {
        animation-name: mixin__borderRebeccapurple;
    }
    img {
        animation-name: mixin__circle, mixin__borderRebeccapurple;
        object-fit: cover;
    }
</style>

​My final thoughts

I really like this technique, though I am not sure if it will make your code unreadable or easier to read. I might need to test this on a small scale. However, if we want to use CSS mixins without SASS, you can try this technique on a small scale. Later, when native CSS mixins become available, you can always upgrade your code.