A decade of stylesheets were written for pre-processors because CSS could not nest. Now it can, natively, and the browser parses exactly the syntax your Sass muscle memory produced, with one rule: descendant selectors inside a nested block need the ampersand.

.card {
  border: 1px solid oklch(0.9 0 0);

  > header { padding: 0.75rem 1rem; }
  &:hover { border-color: oklch(0.75 0 0); }
  p { margin-block: 0.4rem; }
  &.wide { max-width: 60ch; }
}

The two rules that keep it honest

  1. Compound the parent explicitly when you mean it: the ampersand is the parent selector, so card-wide needs the form shown above, and bare .wide would match every wide element.
  2. Keep nesting shallow, two levels at most. Deep nesting was a preprocessor habit for building specificity towers, and specificity towers were always the bug.

Migrating a preprocessor away

  • Sass output already compiles to flat CSS, so run your build one last time and diff; then replace nesting syntax and watch tests hold.
  • Variables translate nearby: most Sass variable files become plain custom properties, which cascade and can be overridden at runtime.
  • The build step may still be worth keeping for other things, but it no longer owns the stylesheet, which is a gacor deletion.

This site ships plain CSS for exactly that reason: fewer build layers between what you wrote and what the browser runs. Nesting just makes plain CSS pleasant at the size where every project actually lives.