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.