7 ms·
One thing worth noting is that & substitutes for `:is(...)` in spirit under the hood, which means there are some significant behavior differences between native
by adamwathan 4y ago
One thing worth noting is that & substitutes for `:is(...)` in spirit under the hood, which means there are some significant behavior differences between native CSS nesting and Sass.
Here's one:
.foo .bar {
.baz & {
color: red;
}
}
In Sass, that would compile to:
.baz .foo .bar {
color: red;
}
With native nesting, it effectively compiles to:
.baz :is(.foo .bar) {
color: red;
}
The Sass version matches this DOM structure:
<div class="baz">
<div class="foo">
<div class="bar">
...
But the native version matches all of these structures:
<div class="baz">
<div class="foo">
<div class="bar">
...
<div class="foo">
<div class="baz">
<div class="bar">
...
<div class="foo baz">
<div class="bar">
...
Not a criticism at all (the `:is(...)` behavior is a very useful and welcome enhancement to CSS) but a notable difference worth understanding coming from Sass.
- DrBenCarson 4y agoAgree important to note the difference but I personally prefer the nested CSS behavior. Much more sensible to use `&` as a logical operator
- TabAtkins 4y agoNotably, this is identical to the behavior you get from @scope's nesting, and from passing a complex selector to an `el.querySelector()`. (We discussed adopting Sass's behavior in <https://github.com/w3c/csswg-drafts/issues/8310#issuecomment-1397648398 https://github.com/w3c/csswg-drafts/issues/8310#issuecomment...> but ultimately dropped it.)
- __ryan__ 4y agoI’ll criticize it. I recognize this is a preview and I desperately hope this implementation isn’t kept around and treated as a quirk. This implementation is extremely unintuitive given their explanation of the expected behavior of CSS Nesting and the & symbol. To quote: The & signals to the browser “this is where I want the selector from outside this nest to go”. Their explanation and the actual implementation result in a majorly different CSS selector. The implemented functionality, however useful, makes no sense as a default if one can explicitly use :is to achieve this behavior like below. .foo .bar { .baz :is(&) { } } The default should behave like they claim it does; simply replace & with the “outside” selector.
- jonny_eh 4y agoWith this hidden :is behavior, migrating to native CSS nesting from SASS will be extremely difficult.