Creating native CSS mixins with @apply rule

Mixins have always been a USP for CSS preprocessors. With the new @apply rule CSS tries to bring that functionality natively.

In this post, we will take a look into the new @apply rule and how it tries to solve some inherent problems in CSS.

This post is an inspiration from Serg Gospodarets's original post and a discussion on Hashnode.

Getting Started

CSS @apply rule lets you create your native CSS mixins with your defined set of properties that you can use in your code.

The declaration is quite simple with the mixin name declared like a simple CSS variable with two hyphens followed by the name and the properties defined under it e.g, --var: { ... };

Let's see how you can use it in practice:

Set your variable

Define your property in the :root (or basically anywhere in your css)

:root {
    --parent-style: {
        color: green;
        background-color: red;
        ...
    };
}

@apply the mixin

.parent {
    @apply --parent-style;
}

The element .parent in out example would now have the styles defined under out --parent-style and you can @apply and override these styles anywhere in your CSS, just like preprocessor mixins.

The Catch

Everything so far sounds too good to be true, doesn't it?.. There must be a catch with this, it can't be as good as a preprocessor mixin, right?

Well.. yes.

There is a catch, two actually.

1) Support for values as arguments

CSS @apply rule does not accept passing values as arguments to the mixin.

So you cannot do something like

@apply --opacity(0); // for opacity 0

// and 

@apply --opacity(1); // for opacity 1

instead, you have to write different rules for different values like:

@apply --opacity-0; // for opacity 0

// and 

@apply --opacity-1; // for opacity 1

Where --opacity-0 and --opacity-1 are two different mixins.

With passing variables as arguments being the key highlight of the concept of having mixins, not having that functionality actually kinda sucks.

But if you're okay to live with that, here's the other catch, browser support.

2) Browser support

Browser support as of now is a big problem. More details in the next section.

Support?

Well.. as of now, the support is pretty much nonexistent.

There's a working implementation in Chrome 51 and Opera 38 but that's about it.

You can enable the support for @apply in Chrome Dev and Canary (desktop and mobile) under the chrome://flags/#enable-experimental-web-platform-features flag

It is going to take a long time to get vendor support and be fully implemented in the browsers. With growing browser support, You would soon be able to your projects.

To conclude, I'd say CSS @apply is an optimistic but incomplete implementation of the preprocessor goodness we already have and like.

It feels like a step in the right direction and I'm excited to see what's ahead.

---

Here's a list of tested native CSS mixins that you can use:

--clearfix: {
    display: table;
    clear: both;
    content: "";
};
--list-unstyled: {
    margin: 0;
    padding: 0;
    list-style: none;
};
--ellipsis: {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
};
--break-word: {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
};

I will keep adding more mixins to the list as the support grows.