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:
@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
bigandy
@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:
Should I add flag to generate these in builder?
Bogdan
would be very rad if a tool was managing these behind the scenes and keeping everything DRY and minimal!
Adam 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 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.
@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?
@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)
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 Argyle
Can't wait to use this to implement my own version of custom media queries in our design system!
Jeroen Zwartepoorte
timing is just funny, like a busy kitchen and everything wants to come out the oven at the same time
Adam Argyle
follow up question tho,
can you smell… what the Chrome rock is cookin?
Adam Argyle
ty YES
just cuz CSS is adding mixins, DOES NOT mean the end of SCSS
Adam Argyle
@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?
Felix
@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.
@flerox no worries!
i think of functions as returning values, like they dont define properties and values. which is exactly what mixins can do, return entire rules or rulesets (including nesting). mixins you @apply while functions you use like `color: --foo()`
Can't believe we're so close to get this ! @function is available too, right ?
Hebilicious
