Sass Nesting

What You’ll Learn

Sass nesting lets you write style rules inside other rules so selectors follow the same visual hierarchy as your HTML. Sass combines them into flat CSS. This page covers basic nests, shallow-nesting habits, selector lists, combinators, and five compiled examples.

What Is Nesting?

HTML has a clear nested structure. Plain CSS does not—you often repeat parent selectors. Sass lets you nest CSS selectors so the source mirrors that hierarchy. By default, Sass joins outer and inner selectors with a descendant combinator (a space).

• Write related rules in one place instead of repeating nav everywhere.
• Compiled CSS is still flat—browsers never see nested rules from Sass.
• Over-nesting creates long, brittle selectors; keep nests shallow.
• For hover states and BEM suffixes, use the parent selector &.

📝 Basic Nesting Syntax

A classic site navigation pattern from the Sass Basics guide:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Compiles to nav ul, nav li, and nav a—readable in SCSS, standard in CSS.

⚠️ Keep Nesting Shallow

Nested rules are helpful, but deep nests make it hard to see how much CSS you generate. The deeper you go, the larger the stylesheet and the more work for the browser. Official docs say: keep those selectors shallow.

📋 Selector Lists

When you nest comma-separated selectors, Sass nests each complex selector separately, then combines them back into one list.

.alert, .warning {
  ul, p {
    margin-right: 0;
    margin-left: 0;
    padding-bottom: 0;
  }
}
// → .alert ul, .alert p, .warning ul, .warning p

🔗 Selector Combinators

You can nest selectors that use combinators. Put the combinator at the end of the outer selector, at the start of the inner selector, or alone between the two.

• > — direct child
• + — adjacent sibling
• ~ — general sibling

🔢 Beyond Plain Descendants

Default nesting always inserts a space (descendant). For pseudo-classes, modifiers, or putting the parent elsewhere in the selector, use the parent selector &.

.button {
  padding: 0.5rem 1rem;

  &:hover { background: #024; }   // .button:hover
  &.is-large { font-size: 1.125rem; } // .button.is-large
}

Examples Gallery

Each example is verified with Dart Sass. Open View Compiled CSS for output.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

.card {
  padding: 1rem;
  border: 1px solid #ddd;

  .title {
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
  }

  .body {
    color: #555;
    line-height: 1.5;
  }

  .footer {
    margin-top: 1rem;
    font-size: 0.875rem;
  }
}

.card {
  padding: 1rem;
  border: 1px solid #ddd;
}
.card .title {
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
}
.card .body {
  color: #555;
  line-height: 1.5;
}
.card .footer {
  margin-top: 1rem;
  font-size: 0.875rem;
}

.alert, .warning {
  ul, p {
    margin-right: 0;
    margin-left: 0;
    padding-bottom: 0;
  }
}

.alert ul, .alert p, .warning ul, .warning p {
  margin-right: 0;
  margin-left: 0;
  padding-bottom: 0;
}

ul > {
  li {
    list-style-type: none;
  }
}

h2 {
  + p {
    border-top: 1px solid gray;
  }
}

p {
  ~ {
    span {
      opacity: 0.8;
    }
  }
}

ul > li {
  list-style-type: none;
}

h2 + p {
  border-top: 1px solid gray;
}

p ~ span {
  opacity: 0.8;
}

.button {
  padding: 0.5rem 1rem;
  background: #036;
  color: #fff;

  &:hover {
    background: #024;
  }

  &.is-large {
    padding: 0.75rem 1.5rem;
    font-size: 1.125rem;
  }
}

.button {
  padding: 0.5rem 1rem;
  background: #036;
  color: #fff;
}
.button:hover {
  background: #024;
}
.button.is-large {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
}

🚀 Real-World Use Cases

• Navigation & menus — nest ul / li / a under nav.
• Cards & media objects — keep title, body, and footer styles together.
• Forms — group label, input, and hint under .field.
• Layout sections — shallow nests for header / main / footer regions.
• Component states — nest with &:hover / &.is-open.

⚠️ Common Pitfalls

• Nesting too deep — long selectors that are hard to override and maintain.
• Forgetting & for states — .btn { :hover { } } becomes .btn :hover, not .btn:hover.
• Copying HTML depth 1:1 — HTML can nest five levels; your CSS usually should not.
• Surprise list explosion — many commas on both sides multiply selectors quickly.
• Assuming CSS nesting is the same — native CSS nesting exists now, but Sass nesting has its own rules and & behavior.

💡 Best Practices