what the fuck they put scss nesting right in there. it's real now. & and all
it's already in firefox, the vanguard of web technology, but tragically seems to be a bit buggy in chrome for now 😔 fixed in trunk though
- he/him
I do UI programming for AAA games and I have opinions about adult games
Discord
mrhands31
You must log in to comment.
in reply to @lexyeevee's post:
genuinely it is so strange to me to see the thing I started working on for fun in the 00s (back when CSS was barely evolving and hsl() needed a polyfill) dramatically shape the language it was built around
hey though, congrats on having a css feature that is extremely your fault
CSS variables were already pretty heavily inspired by Sass although the semantics ended up much more different
yeah they came out barely recognizable as even related. at a glance nesting looks like it works dead on exactly the same
It's very close; for 95% of uses it's identical. Differences are:
- & is built on top of :is() internally to avoid a trivial exponential explosion, so if the parent is a list of selectors with different specificities, & will have the largest specificity among the list
- & actually matches the elements matched by the patent; it's not string substitution. This affects things like
.foo {&div {}}(div.foo in CSS, .foodiv in Sass) but also things like.foo .bar { .baz & {}}(.baz .foo .barin Sass, but.baz :is(.foo .bar)in CSS; the CSS one can have either ancestor order). - if you have properties following a rule, sass is a little inconsistent about their exact position in the cascade; CSS just resolved to keep them exactly where it looks like they are.
yeah! I've been building a little site for myself for the last few months now that it's supported everywhere and it's finally fun again!
the only real issue I ran into is shared by all browsers and it's that toggling single css properties on or off in the devtools will make the entire selector just disappear. growing pains, I guess