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 threadBramus16h ago

@leaverou To those finding this thread: before you vote 100-200-300, hear me out: https://github.com/LeaVerou/blog/discussions/137#discussioncomment-16340589

Thanks :)

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 threadThomas Michael Semmler15h ago
@bramus having read your explanation, I am even more confused now. I am aware that without @ property the var passed is not a length, but I didn't know that 'length' forces value computation. From a code point of view, choosing an em unit I am describing "this should be in relation to the current font-size". em is a length. Why should that mean that the characteristics of the unit are getting nullified? even if it is computed, at the point of computation, it should still ... @leaverou having
Show threadThomas Michael Semmler15h ago
@bramus ... consider the font-size. Should it not? What happens when I pass container units? Will they also ignore their relation to a container? @leaverou
Show threadBramus

@nachtfunke @leaverou Because the function says `--arg` should be a `<length>`, it will compute the value (similar to registered custom props). So where you `@apply` the mixin, it will take the CQ units from that element.

(If you don’t want that: don’t type the `--arg`. It’s a simple as that.)

12:11pmWeb