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:
@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 ✅ 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)
@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.
@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.
@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.
@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?
@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.
@bigandy that's indeed a merged PR related to mixins, but over on https://issues.chromium.org i'm still tryin to find out if there's a ticket to watch. hopefully will get back to you today!
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()`
