Nesting selectors without Sass or Less
Selector nesting was the #1 reason people reached for Sass. It's now built into CSS. Same & syntax, zero build tools.
2.nav {
3 display: flex;
4 gap: 8px;
5
6 & a {
7 color: #888;
8 text-decoration: none;
9
10 &:hover {
11 color: white;
12 }
13 }
14}
15// sass --watch nav.scss nav.css
2.nav {
3 display: flex;
4 gap: 8px;
5
6 & a {
7 color: #888;
8 text-decoration: none;
9
10 &:hover {
11 color: white;
12 }
13 }
14}
No build step
Drop Sass, Less, PostCSS, or any compiler. Ship CSS directly to the browser, nesting included.
Familiar syntax
Same & nesting you already know from Sass. Near-zero learning curve for existing teams.
Smaller toolchain
One fewer dependency in your build. Faster installs, simpler CI, fewer things to break.
How it works
CSS nesting lets you write child selectors inside parent rule blocks using the & symbol, just like Sass. The browser interprets .nav { & a { … } } as .nav a { … }.
You can nest pseudo-classes (&:hover), pseudo-elements (&::before), and even media/container queries inside a rule block. The & always refers to the parent selector.
The only small difference from Sass: for element selectors you need the & prefix. In Sass you could write a { color: red } inside a parent, but native CSS requires & a { color: red }.