For years, starting any front-end project came with an automatic reflex: install Sass.
Vanilla CSS was simply too limited for production-scale work. No nesting, no variables, and no modular architecture without fighting specificity battles. Running a compiler wasn’t an architectural debate; it was the only practical way to keep stylesheets maintainable.
Today, that reflex doesn't make much sense.
The web platform has absorbed almost every reason teams reached for preprocessors in the first place. Features once trapped behind build steps are now tracked as Baseline on WebStatus: CSS nesting is supported across every engine, and native custom properties didn't just replace static variables—they surpassed them by living directly in the DOM at runtime.
More importantly, the platform evolved into territory that a build-step compiler could fundamentally never reach. A preprocessor runs before the browser touches the code; it has zero awareness of layout, viewport, or user interaction.
Modern native CSS handles dynamic runtime capabilities natively:
- Typed properties with @property: Custom properties can define explicit types, default fallbacks, and inheritance rules. This enables smooth, frame-by-frame animations on values browsers previously treated as plain strings (track its widespread availability on WebStatus).
- Scroll-driven animations with scroll-timeline: Bind keyframe animations directly to scroll progress on the compositor thread without JavaScript listeners or layout thrashing (MDN scroll-driven animations guide).
- Seamless page morphing via @view-transition: Coordinate animated visual transitions between DOM states—across both SPAs and multi-page architectures—entirely in the browser (check rollout status on WebStatus).
- Native CSS Anchor Positioning: Tether tooltips, popovers, and dropdown menus to target elements without absolute positioning math or third-party positioning scripts (anchor positioning feature status).
- Upcoming platform logic: Specifications like inline
if() conditionals, alongside established features like :has() and Container Queries, allow stylesheets to resolve complex context-dependent styles directly in the engine.
Where Sass Still Makes Sense
Sass is not dead, but it is no longer universal infrastructure. Its role has narrowed down to specific build-time requirements:
- Programmatically generating large utility matrices through loops and map lookups.
- Maintaining legacy codebases and mature enterprise design systems heavily tied to bespoke mixin libraries.
- File-splitting strategies that rely strictly on preprocessor bundling rather than modern module bundlers.
If a project does not require heavy algorithmic CSS generation, keeping a preprocessor in your pipeline mostly adds dependency overhead, upgrade debt, and build latency.
The Takeaway
Tools exist to bridge gaps in the platform until the platform catches up. CSS caught up, and then shifted the game to the runtime.
Before adding another build tool out of habit, check MDN and WebStatus to see what the browser already handles natively. Starting with plain CSS keeps your dependency tree lean, speeds up local builds, and keeps your codebase closer to the platform itself. Unless a project presents a problem only a compiler can solve, native CSS is the better default.
