Post #2392945
2026-03-26 22:22 UTC
Replies (8)
-
@gumnos@mastodon.bsd.cafe 2026-03-26 23:19
@leaverou@front-end.social (now that I understand what you were asking) C & D seem yick. I can see justification for A & B either way. I like/voted A since there could be simple optimizations available and it's less likely to do surprising things, which I might worry about if the order switched to: div > h2 { font-size: 20px; } div + p { font-size: 30px; } div { @apply --foo(10em); font-size: 10px; } But ideally, I'd go with option E, "have the browser reach through the screen and smack the web-dev with a pool noodle" 😆
-
@AmeliaBR@front-end.social 2026-03-27 00:53
@leaverou@front-end.social 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?
-
@sturobson@front-end.social 2026-03-27 08:23
@leaverou@front-end.social I also took a look at what a Sass mixin would create (and how that compiled CSS would effect the HTML)
-
@AliveDevil@tauri.earth 2026-03-27 09:37
@leaverou@front-end.social Voted B for raw/intent-values. Voting E for computed values/layout pass: - div > h2 is constrained by the parent div to 100px, so it shouldn't grow larger than the containing div - div + p however isn't constrained by the 100px div, but by their shared parent, so the p could be at most 300px. TL;DR: div 100px, h2 200px, p 300px; but div > h2 constrained to 100px, div + p at most 300px
-
@ziadkh0@fosstodon.org 2026-03-27 10:47
@leaverou@front-end.social I voted A, because —arg is defined as type . I would vote B for untyped —arg. Because this what @-function does and I would expect @-mixin to work the same way, in terms of resolving em to px or not. Example (only work in Chrome): https://codepen.io/ziadkh0/pen/WbGdWdb
-
@bramus@front-end.social 2026-03-27 10:48
@leaverou@front-end.social To those finding this thread: before you vote 100-200-300, hear me out: https://github.com/LeaVerou/blog/discussions/137#discussioncomment-16340589 Thanks :)
-
@nachtfunke@indieweb.social 2026-03-27 11:43
@leaverou@front-end.social oof that is really difficult to understand, all of it. I’d expect the width to be 10em, not computed pixels. Do I misunderstand this? Apply will transform relative values?
-
@nmn@indieweb.social 2026-03-31 21:21
@leaverou@front-end.social Allowing mixins to target other elements at all feels icky and like a foot gun. Strongly against adding this feature to CSS in the current form.