Sass Nesting — Writing Clean Nested Selectors

In this tutorial, you will learn about Sass Nesting. We cover key concepts, practical examples, and best practices to help you master this topic.

Sass nesting lets you write CSS selectors inside other selectors, creating a visual hierarchy that mirrors your HTML structure while reducing selector repetition.

What You'll Learn

You will learn how to nest selectors in Sass, understand the compiled output, use nesting for pseudo-classes and pseudo-elements, and avoid over-nesting.

Why It Matters

Nesting eliminates repetitive parent selectors. DodaTech's component stylesheets use nesting to keep related styles visually grouped and easier to maintain.

Real-World Use

Doda Browser's settings panel uses nesting for form groups where labels, inputs, and help text styles are nested inside the group container.

flowchart LR
    A[Data Types] --> B[Nesting]
    B --> C[Basic Nesting]
    B --> D[Pseudo Selectors]
    B --> E[Properties]
    B --> F[Limits]
    style B fill:#c69,stroke:#c69,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Basic Nesting

.nav {
  background: #333;
  padding: 1rem;

  .nav-item {
    display: inline-block;
    margin-right: 1rem;

    .nav-link {
      color: white;
      text-decoration: none;
    }
  }
}

Compiles to:

.nav { background: #333; padding: 1rem; }
.nav .nav-item { display: inline-block; margin-right: 1rem; }
.nav .nav-item .nav-link { color: white; text-decoration: none; }

Expected output: Nested selectors become descendant selectors in the compiled CSS.

Nesting Pseudo-Classes and Pseudo-Elements

Use & to reference the parent selector:

.button {
  background: #7c3aed;
  color: white;
  padding: 0.5rem 1rem;
  border: none;

  &:hover {
    background: #6d28d9;
  }

  &:focus {
    outline: 2px solid #a78bfa;
  }

  &::before {
    content: ">";
    margin-right: 0.5rem;
  }

  &.active {
    background: #5b21b6;
  }
}

Compiles to:

.button { background: #7c3aed; ... }
.button:hover { background: #6d28d9; }
.button:focus { outline: 2px solid #a78bfa; }
.button::before { content: ">"; margin-right: 0.5rem; }
.button.active { background: #5b21b6; }

Expected output: The & concatenates the parent selector with pseudo-classes, pseudo-elements, or additional classes.

Nesting Properties

Sass allows nesting CSS properties with common prefixes:

.card {
  // font-* properties
  font: {
    family: "Inter", sans-serif;
    size: 1rem;
    weight: 600;
  }

  // margin-* properties
  margin: {
    top: 1rem;
    bottom: 2rem;
  }
}

Compiles to:

.card {
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

Expected output: Nested property names compile to the full property name with the parent prefix.

BEM with Nesting

.block {
  background: white;

  &__element {
    padding: 1rem;

    &--modifier {
      background: #f0f0f0;
    }
  }

  &--highlighted {
    border: 2px solid gold;
  }
}

Compiles to:

.block { background: white; }
.block__element { padding: 1rem; }
.block__element--modifier { background: #f0f0f0; }
.block--highlighted { border: 2px solid gold; }

Expected output: BEM naming with & concatenation for elements and modifiers.

Media Query Nesting

.sidebar {
  width: 100%;

  @media (min-width: 768px) {
    width: 250px;

    .sidebar-header {
      font-size: 1.25rem;
    }
  }
}

Compiles to:

.sidebar { width: 100%; }
@media (min-width: 768px) {
  .sidebar { width: 250px; }
  .sidebar .sidebar-header { font-size: 1.25rem; }
}

Expected output: The media query nests inside the selector, and the compiled output places the selector inside the media query.

Common Mistakes

1. Nesting Too Deep (4+ Levels)

Deep nesting creates highly specific CSS selectors (.nav .nav-item .nav-link .icon ...) that are hard to override and slow for browsers.

2. Using Nesting When Not Needed

Not every child selector needs nesting. If a selector is specific enough on its own, keep it flat.

3. Forgetting the & With Pseudo-Classes

Writing :hover without & inside a block compiles to .nav :hover (descendant), not .nav:hover.

4. Nesting Global Styles

Styles like resets or base typography should not be nested. Keep them at the root level.

5. Overusing @at-root

The @at-root directive breaks free from nesting. Use it sparingly and only when needed.

Practice Questions

1. What character references the parent selector in nesting? The & ampersand character references the parent selector.

2. What CSS selector does .parent { .child { ... } } compile to? .parent .child (descendant selector with a space).

3. How do you write &:hover and what does it compile to? &:hover compiles to .selector:hover — the parent element in its hover state.

4. What is the maximum recommended nesting depth? 3-4 levels maximum. Deeper nesting creates overly specific CSS.

5. How does @media work inside a nested block? The media query wraps the parent selector in the compiled output while keeping related styles together in the source.

Challenge

Take a BEM-styled CSS component (30+ lines) and convert it to nested SCSS. Use the & operator for elements and modifiers. Verify the compiled CSS matches the original.

FAQ

Mini Project

Convert a CSS stylesheet for a navigation component (with parent ul, li items, links, hover states, and active class) into nested SCSS. Use proper nesting depth (max 3 levels) and the & parent selector.

What's Next

Master the Parent Selector for advanced selector patterns. Then learn Partials and Import for file organization.