RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconOpen Source Software IconSpeaking IconTools IconShuffle IconNext IconPrevious IconCalendar IconCalendar Edit IconNotebook IconObservable Notebooks IconSlash IconGoogle G Icon
@mixin --box {
  aspect-ratio: 1;
  inline-size: 100px;
  block-size: 100px;
}
.box {
  @apply --box;
}
My google avatar.2 min read

CSS Mixins are ready for experimentation!

css

CSS Mixins and Functions are both ready for you to hack on 🤯. I think of functions as returning a value and mixins as a way to apply a chunk of styles.

Bramus has a great intro on @function, don't miss it. But this post is about @mixin, don't miss the explainer, it is packed with valuable information:

@mixin --box {
  aspect-ratio: 1;
  inline-size: 100px;
  block-size: 100px;
}

and using it:

.box {
  @apply --box;
}

Getting started #

For CSS Mixins as of writing this, you'll need Canary and you'll need to launch it from the command line with this flag CSSMixins:

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

Go make stuff! #

You have all the latest information now:

29 mentions #

113likes
28reposts
  • Nilesh Prajapati
  • davepermen
  • bigandy
  • Jack Iakovenko
  • Simon
  • Bramus
  • Ryan Mulligan
  • Kai Klostermann
  • developez
  • Roma Komarov
  • Nick Taylor
  • Marcos de Miguel
  • Stefan Matei
  • Emmie Päivärinta
  • McNeely
  • Jeroen Zwartepoorte
  • Konstantin Denerz
  • Felix
  • Tom Arild Jakobsen
  • Toby Evans
  • Christian Alder
  • Philip Jägenstedt
  • Vlad
  • Martin
  • Bruce B Anderson
  • tomkyle
  • LukyVj - A$AP Luky
  • Martin Masevski

Join the conversation on

@argyleink holy shit this is incredible! What a year so far! Functions, sibling-index(), sibling-child(), and now @mixins!
What next?
Is there a list of things that are going to be prototyped?
I'm thinking random(), @media and @container queries with variables in them, and relative @container style() queries

bigandybigandy

@bigandy ✅ random() might get hacked on, has a spec draft
✅ probably won't get variables in queries, but we should get env() variables in queries (since they're const's)

what's a relative container style query?!

Adam Argyle :chrome:Adam Argyle :chrome:

@argyleink :root ist Schnee von gestern ????

????????????????????????????????

@argyleink Two quick things:

1. https://codepen.io/kizu/pen/bNGxGoY — crashes :D wrapping content with `& { … }` works, though.

2. Seems that there is no passing of the nested content, which, a strong opinion, is a must: https://css.oddbird.net/sasslike/mixins-functions/#passing-nested-content-to-mixins

mixins
Roma KomarovRoma Komarov

@kizu ty ty! forwarding on to the team. keep up the great hack work!

Adam Argyle :chrome:Adam Argyle :chrome:
Should I add flag to generate these in builder?
BogdanBogdan
would be very rad if a tool was managing these behind the scenes and keeping everything DRY and minimal!
Adam ArgyleAdam Argyle

@argyleink Another quick thought: currently, all custom properties are not scoped to the mixin, which can be useful.

However it would also be great to have mixins work similar to custom functions, where only the `result: …` is their output, and everything else is only available inside the function.

cc @mia

Roma KomarovRoma Komarov

@argyleink @mia Maybe something like a `@result {}` block:

- If there is no `@result` defined in a mixin, then everything is output.
- Otherwise, when it is present, anything outside the `@result` is private to the mixin, similar to @function.

Roma KomarovRoma Komarov

@bigandy oh, the delightful "media query range syntax"! i dont have a thumb on that one, but doesnt look controversial, so maybe just needs more folks to ask for it?

Adam Argyle :chrome:Adam Argyle :chrome:
Ooooh, it’s happening?
Nicole SullivanNicole Sullivan

@kizu @argyleink Yeah, an `@result {}` block was part of the original proposal for that reason. Another option would be flagging specific things as private/local. This is the first I'm hearing about a prototype! I'll have to go take a closer look.

Mia (web luddite)Mia (web luddite)
it's a very early prototype yep! afaik, the team is using the proto to help write/finish/finesse the specs (which i'm a really big fan of conceptually)
Adam ArgyleAdam Argyle

@argyleink do you know if there is a ticket on https://issues.chromium.org/issues or elsewhere that tracks the progress? That way it's easier to see what parts of the @mixin feature are expected to work.

Was super useful when following the @function ticket https://issues.chromium.org/issues/325504770

Chromium
bigandybigandy
Can't wait to use this to implement my own version of custom media queries in our design system!
Jeroen ZwartepoorteJeroen Zwartepoorte
it is! flag is in the post ????
Adam ArgyleAdam Argyle
I see, I see. Cooking over there.
Andy BellAndy Bell
timing is just funny, like a busy kitchen and everything wants to come out the oven at the same time
Adam ArgyleAdam Argyle
follow up question tho, can you smell… what the Chrome rock is cookin?
Adam ArgyleAdam Argyle
you can’t css me.
Stuart RobsonStuart Robson
ty YES just cuz CSS is adding mixins, DOES NOT mean the end of SCSS
Adam ArgyleAdam Argyle

@argyleink looks like it was added here https://chromium-review.googlesource.com/c/chromium/src/+/5590588 is it currently being updated as well?

bigandybigandy

@argyleink Interesting! Although it looks very clean, is there a possibility that functions can be used instead? Maybe mixins are just syntactic sugar for functions without logic?

FelixFelix

@argyleink It was ages ago since I used SASS so I can’t remember what mixins are supposed to do (I guess they’re “prefabs”). I’m just pumped to approach this with a beginner’s mindset being able to ask “newbie” questions.

FelixFelix
Can't believe we're so close to get this ! @function is available too, right ?
HebiliciousHebilicious