CSS Nesting: Native Syntax vs Preprocessor Nesting
Compare native CSS nesting with Sass/Less nesting syntax. Understand the differences, browser support, migration path, and whether you still need a CSS preprocessor in 2026.
Key Takeaways
- CSS nesting — the feature that made Sass indispensable for over a decade — is now native in all modern browsers.
- & .title { font-size: 1.25rem; }
- If you use Sass primarily for nesting and variables, native CSS now covers both.
- CSS nesting is supported in Chrome 120+, Firefox 117+, and Safari 17.2+ (all released late 2023 / early 2024).
Native CSS Nesting Is Here
CSS nesting — the feature that made Sass indispensable for over a decade — is now native in all modern browsers. You can write nested selectors directly in plain CSS without any build step or preprocessor.
Syntax Comparison
/* Native CSS nesting */
.card {
background: white;
& .title { font-size: 1.25rem; }
&:hover { box-shadow: 0 4px 12px rgb(0 0 0 / 0.1); }
@media (min-width: 768px) { padding: 2rem; }
}
/* Sass nesting (identical result) */
.card {
background: white;
.title { font-size: 1.25rem; }
&:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
@media (min-width: 768px) { padding: 2rem; }
}
Key Differences
| Feature | Native CSS | Sass | Less |
|---|---|---|---|
& for compound |
Required for type selectors | Optional | Optional |
@media nesting |
Yes (native) | Yes | Yes |
| Variables | Custom properties (runtime) | $var (compile-time) |
@var |
| Mixins | No | Yes | Yes |
| Functions | Limited (calc(), etc.) |
Rich | Limited |
| Build step | None | Required | Required |
Do You Still Need Sass?
If you use Sass primarily for nesting and variables, native CSS now covers both. Sass remains valuable for mixins, functions, @extend, and complex logic. Evaluate your actual Sass usage — many projects can drop the preprocessor entirely.
Browser Support
CSS nesting is supported in Chrome 120+, Firefox 117+, and Safari 17.2+ (all released late 2023 / early 2024). For older browser support, continue using a preprocessor or PostCSS nesting plugin as a compilation step.