Modern CSS features from SCSS

Using SCSS alongside modern CSS: cascade layers, native nesting, @scope, and knowing when the preprocessor should step back.

Native nesting is real now

Browsers support nested CSS rules. You can write:

.card {
  padding: 1rem;

  & h2 {
    font-size: 1.25rem;
  }

  &:hover {
    border-color: var(--color-brand);
  }
}

Sass nested this way for years; now the output can match what you author. In SCSS files, nesting still compiles – useful for organisation. Do not nest so deep that specificity climbs (see the specificity tutorial).

@layer from SCSS

Declare layers in SCSS partials, compile to layered CSS:

// abstracts/_layers.scss
$layers: reset, base, components, utilities;

// base/_index.scss
@layer base {
  @use 'typography';
  @use 'forms';
}

// components/_button.scss
@layer components {
  .button { /* ... */ }
}

Layer order can be forwarded from a single entry file so every partial agrees on the stack. This pairs well with the 7-1 folder layout.

:is(), :where(), :has()

Modern selectors work in SCSS like normal CSS. SCSS adds no special syntax:

.nav {
  :is(a, button) {
    padding: $space-sm $space-md;
  }

  &:has(.badge) {
    gap: $space-xs;
  }
}

Use :where() when you want zero specificity contribution from a grouped selector.

@scope (where supported)

@scope (.prose) {
  p {
    margin-block: $space-md;
  }

  a {
    color: var(--color-brand);
  }
}

Scope limits which elements match nested selectors – handy for CMS content areas. Check caniuse before relying on it in production; provide unscoped fallbacks if needed.

When SCSS adds value vs when it does not

• Still use SCSS for: token maps, loops, mixins for breakpoints, multi-file architecture.
• Consider plain CSS for: a small component with nesting and variables only.
• Compile less: if your build only flattens nesting, measure whether native CSS plus a bundler is enough.

SCSS is a tool, not a loyalty programme. Generate what browsers need; avoid compiling features CSS already handles unless organisation benefits.

Try it

• Move one nested component to use @layer components.
• Replace a deep descendant selector with :is() or flatten nesting.
• List which SCSS features your project still needs after that experiment.