Modern CSS Nesting & Preprocessors

CSS rules were traditionally flat, requiring repetitive selector declarations. Today, Native CSS Nesting lets developers group dependent rules directly in standard CSS—a capability originally pioneered by preprocessors like Sass/SCSS.

1. Native CSS Nesting Syntax

Native CSS Nesting allows child selectors, pseudo-classes, and media queries to be nested directly within a parent rule block.

/* Modern Native CSS Nesting */
.article-card {
  background-color: #1e293b;
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid #334155;

  /* Target nested element */
  & .article-card__title {
    color: #38bdf8;
    margin-top: 0;
  }

  /* Target state on parent */
  &:hover {
    border-color: #2563eb;

    & .article-card__title {
      color: #60a5fa;
    }
  }

  /* Target nested media query */
  @media (width >= 600px) {
    padding: 2rem;
  }
}

The Parent Selector (&)

The & nesting symbol explicitly references the outer parent selector. In Native CSS, nested rules without & implicitly prepend & (with a space) for descendant matching.

2. SCSS Architecture: Mixins & Modules

While Native CSS supports nesting and custom properties, CSS preprocessors like Sass/SCSS offer advanced programmatic capabilities compiled to standard CSS.

Reusable Mixins (@mixin & @include)

// Define a reusable flexbox layout mixin
@mixin flex-center($direction: row,$gap: 1rem) {
  display: flex;
  flex-direction: $direction;
  align-items: center;
  justify-content: center;
  gap: $gap;
}

// Consume the mixin inside a component
.hero-box {
  @include flex-center(column, 1.5rem);
  min-height: 200px;
}

Modern Sass Module System (@use & @forward)

// _variables.scss
$primary-color: #2563eb;
$font-stack: system-ui, sans-serif;

// styles.scss
@use 'variables' as vars;

.button {
  background-color: vars.$primary-color;
  font-family: vars.$font-stack;
}

Interactive Playground: Nested Component Architecture

Test live Native CSS Nesting state cascades in the editor below:

Loading Interactive Editor...

Summary Reference Table

Feature	Native CSS Syntax	SCSS / Sass Syntax
Nesting Selector	& .child { ... }	& .child { ... }
Parent Reference	&:hover { ... }	&:hover { ... }
Reusability	CSS Custom Properties	@mixin / @include directives
Modular System	@import / @layer	@use / @forward module system