Sass Nesting

What Is Sass Nesting?

Nesting lets you write a selector inside another selector's curly braces. The compiler combines the nested selector with its ancestor, producing the same descendant selector you would otherwise write by hand in plain CSS.

Nesting visually mirrors your HTML structure, related rules stay grouped together instead of scattered throughout a flat stylesheet.

.nav {
  display: flex;

  li {
    margin-right: 1rem;
  }

  a {
    color: inherit;
  }
}

This compiles to three separate CSS rules: .nav, .nav li, and .nav a, exactly what you would write manually in plain CSS.

Nesting Syntax

.parent {
  property: value;

  .child {
    property: value;
  }

  &:hover {
    property: value;
  }
}

• Any selector can be nested inside another selector's block.
• The parent selector & refers back to the enclosing selector.
• Nested rules compile into standard descendant (or combined) CSS selectors.
• Media queries and other at-rules can be nested too, and Sass hoists them appropriately in the output.

Sass Nesting Cheatsheet

Common nesting patterns and what they compile into.

The Parent Selector Inside Nesting

The & symbol is the most powerful part of Sass nesting. It represents the full selector of the enclosing rule and can be combined with pseudo-classes, additional classes, or even placed on either side of a compound selector.

.btn {
  &:hover,
  &:focus {
    opacity: 0.9;
  }

  &.is-disabled {
    cursor: not-allowed;
  }

  &__icon {
    margin-right: 0.5rem;
  }
}

& directly attaches to pseudo-classes, extra classes, and BEM-style suffixes without adding a space.

Nesting Media Queries

Sass allows nesting @media (and other CSS at-rules) directly inside a selector block. The compiler automatically restructures this into a standard media query wrapping the selector in the output CSS.

.sidebar {
  width: 300px;

  @media (max-width: 768px) {
    width: 100%;
  }
}

Compiles to .sidebar { width: 300px; } @media (max-width: 768px) { .sidebar { width: 100%; } }.

Avoiding Over-Nesting

Nesting can be overused. Deeply nested SCSS produces highly specific compiled selectors that are hard to override later and closely couple your CSS to a specific HTML structure.

• A widely followed guideline is the "Inception Rule": avoid nesting more than three or four levels deep.
• Prefer BEM-style class names combined with & over deep descendant nesting.
• If a nested rule needs to target something far down the DOM tree, consider whether that element deserves its own class instead.

Common Mistakes

• Nesting five, six, or more levels deep, producing compiled selectors with excessive, hard-to-override specificity.
• Forgetting that & must be adjacent to what follows it; & .child and &.child compile very differently.
• Nesting unrelated selectors together just because they happen to be visually close in the file.
• Not realizing nested media queries duplicate the selector for every breakpoint, which can bloat output CSS if overused.

Key Takeaways

• Nesting mirrors HTML structure in your selectors and reduces repetition.
• The parent selector & refers to the enclosing selector and combines directly with suffixes, pseudo-classes, or classes.
• Media queries can be nested inside a rule and are automatically restructured in the compiled CSS.
• Keep nesting shallow, roughly three levels or fewer, to avoid overly specific, hard-to-maintain CSS.