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
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2023.
Safe to use without fallbacks.
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.