Lea Verou, PhD1d ago

🚨 Want mixins in CSS?
Help the @csswg by telling us what feels natural to you!

Look at the code in the screenshot. What resulting widths would you find least surprising?

A: All get 100px
B: div gets 100px, div > h2 gets 200px, div + p gets 300px
C: div gets 100px, div > h2 gets 200px, div + p gets no width*
D: div and div > h2 get 100px, div + p gets no width*

* from the mixin

Poll in https://front-end.social/@leaverou/116297811172593173

Please answer based on what feels natural *to you*, it's not a quiz.

Show threadLea Verou, PhD1d ago
Question in https://front-end.social/@leaverou/116297807826814028
A (All 100px)
B (100px, 200px, 300px)
C (100px, 200px, nothing)
D (100px, 100px, nothing)
Poll ends at .
Lea Verou, PhD (@[email protected])

Attached: 1 image 🚨 Want mixins in CSS? Help the @[email protected] by telling us what feels natural to you! Look at the code in the screenshot. What resulting widths would you find least surprising? A: All get 100px B: div gets 100px, div > h2 gets 200px, div + p gets 300px C: div gets 100px, div > h2 gets 200px, div + p gets no width D: div and div > h2 get 100px, div + p gets no width Poll in https://front-end.social/@leaverou/116297811172593173 Please answer based on what feels natural to you, not what the current proposal says.

Front-End Social
Show threadAmelia Bellamy-Royds

@leaverou I'm not clear where the "nothing" option comes from. Is the idea that since the `+ p` isn't a descendent of the div it can't inherit anything from the mix-in? I don't see why that would make sense unless you're going to make all nesting work like that.

For the other two options, I can see use cases for both wanting the argument to the mix-in to resolved at the time the mix-in is applied, or only in the final rule. Maybe support syntaxes for either?

Mar 27 at 12:53amWeb
Show threadBramus19h ago
@AmeliaBR @leaverou That is already possible with the current syntax. See https://github.com/LeaVerou/blog/discussions/137#discussioncomment-16340589 for details :)
What mixin behavior feels most natural to you around nested rules? · LeaVerou blog · Discussion #137

🚨 Want mixins in CSS? Help the CSS WG by telling us what feels natural to you! Look at this code: @mixin --foo(--arg <length>) { @result { &, & > h2, & + p { width: var(--arg); } } } div { @apply -...

GitHub
Show threadAmelia Bellamy-Royds15h ago

@bramus @leaverou Oh, that does make sense & solves both use cases. Define the argument as a `<length>` to cause any passed in values to be converted to an absolute length before use, but leave it untyped to use the token as specified.

It's something that would need good notes & examples in the spec, but now I understand the reasoning, I agree that it's logical.

Somewhat related: any progress on defining a CSS type notation for untyped custom properties etc? <token-stream>?