Native CSS Nesting (No Sass or Less)
Nesting selectors without Sass or Less
Selector nesting was the #1 reason people reached for Sass. It's now built into CSS and part of Baseline 2023. Same & syntax, zero build tools.
// nav.scss, requires Sass compiler.nav { display: flex; gap: 8px; & a { color: blue; }}/* nav.css, plain CSS, no compiler */.nav { display: flex; gap: 8px; & a { color: #888; text-decoration: none; &:hover { color: white; } }}nesting Browser Support
Since 2023 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
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.
Unlike the initial release, the relaxed nesting syntax now matches Sass: you can write bare element selectors like a { color: red } directly inside a parent. The & is only required for compound selectors like &:hover or &.active.