First version of CSS mixins has landed in Chrome Canary

A few days ago, I saw a blog post from Adam Argyle about a new CSS feature. This came just a month after the first release of CSS functions. This week, we were surprised with CSS mixins. The first pre-release version has just landed in Google Chrome Canary. At this moment, it is still behind a browser flag which can only be enabled using the command line. I will share the command for this later on in this article. 

Last evening, after reading the blog post, I had to setup my own test. Just to see it for myself and to figure out how this will work. I was unable to get it to work in Google Chrome Canary as my tab was only crashing. After figuring out why this was happening. It seemed that the declarations directly inside CSS Mixins currently is crashing due to interactions with the signaling rules. As noted here. To prevent the browser tab from crashing, I had to separate my @mixins in a custom CSS file from my styling. 

In the end, I was unable to get it working. It likely needs more time to iron out the bugs. So, I might test it later on.

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.

I have added an example of a SASS mixin below. In this case, it handle display: flex with backward compatibility by added the old browser prefixes. However, you should not write code like this today, as it is no longer necessary.

​@mixin flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.el {
  @include flexbox();
}

How can I use CSS mixins?

If you want to test the new CSS mixins yourself, you need to enable this feature using a command-line command below. At this point, there is no flag available within the browser itself. I expect this will be available later, once this feature becomes more stable.

open -a "Google Chrome Canary" --args --enable-features=CSSMixins

Or the one for Linux/Ubuntu:

​​google-chrome-canary --enable-features=CSSMixins

Or, if you have a Mac like me, you can use the command line below.

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --enable-features=CSSMixins​​

Example of a basic CSS mixin

Now Google Chrome Canary has started with the feature enabled. I did some testing by creating my first concept using the CSS Mixin. Too bad it didn't seem to work in my browser. However, I can still show some code examples of how it works. The setup for the basic and minimal version of the CSS mixin is shown below. I just created a @mixin and included the CSS attributes. Then, I applied this mixin (component) to my element using the @apply rule with the mixins name. I have included the code below.

@mixin --whiteCircle {
    border-radius: 50%;
    aspect-ratio: 1;
    background-color: white;
}

.el {
    @apply --whiteCircle;
}

As far as I know, this is the only implementation for CSS Mixins at this point. I expect that in the upcoming months, the feature set of this CSS rule will be expanded. There are plans to extend the mixins so they support arguments, allowing CSS Mixins to have more and better use cases.

The code example below is how I believe the mixin should work with arguments. I'm not sure if this is already defined in the specifications. Be aware that the information shown here is subject to change.

​@mixin --button (--face, --text, --radius) {
  background-color: var(--face);
  color: var(--text);
  border-radius: var(--radius);
}

.btn {
  @apply --button(rebeccapurple, white, 1rem)
}

In the explainer from CSS Oddbird, you can find a complete explanation of the implementation if you want to learn more about it.

My thoughts about CSS mixins

I believe this will be a great addition for front-end developers like us. While most front-end developers use SASS for CSS mixins, there's no immediate need to switch away from it in the short term. However, the fewer compilers we need and the more of this that is built into the browser, the better the code will be. Fewer compilers needed to build things is always better in the long run. I've never been a big fan of using third-party code and compilers for web development, but sometimes they become part of the web platform. Back to CSS Mixins—I can't wait to use them in a few years.