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
@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)
Can't wait to use this to implement my own version of custom media queries in our design system!
Jeroen Zwartepoorte
@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
