Sass: Nested Rules

Nesting is the combining of different logic structures. Using Sass, we can combine multiple CSS rules within one another. If you are using multiple selectors, then you can use one selector inside another to create compound selectors, without repeating the parent selector every time.

Sass will automatically combine the outer rule's selector with the inner rule's selector, using a descendant combinator (a space) to join them.

How It Works

Instead of writing:

.container h1 { font-size: 25px; color: #E45456; }
.container p { font-size: 25px; color: #3C7949; }
.container .box h1 { font-size: 25px; color: #E45456; }
.container .box p { font-size: 25px; color: #3C7949; }

You can nest the rules to reflect the HTML structure and avoid repeating .container:

.container {
  h1 {
    font-size: 25px;
    color: #E45456;
  }

  p {
    font-size: 25px;
    color: #3C7949;
  }

  .box {
    h1 {
      font-size: 25px;
      color: #E45456;
    }

    p {
      font-size: 25px;
      color: #3C7949;
    }
  }
}

Sass compiles each nested selector by prepending the parent selector with a space, producing the equivalent flat CSS.

Full Example

Here is a complete, runnable example. First, the HTML file (nested.html):

<!DOCTYPE html>
<html>
   <head>
      <title>Nested Rules</title>
      <link rel="stylesheet" type="text/css" href="style.css" />
   </head>

   <body>
      <div class="container">
         <h1>H1 Heading</h1>
         <p>A paragraph</p>
         <p>Another paragraph</p>
         <div class="box">
            <h1>Another H1 Heading</h1>
            <p>Another paragraph</p>
         </div>
      </div>
   </body>
</html>

Next, create the style.scss file:

.container {
  h1 {
    font-size: 25px;
    color: #E45456;
  }

  p {
    font-size: 25px;
    color: #3C7949;
  }

  .box {
    h1 {
      font-size: 25px;
      color: #E45456;
    }

    p {
      font-size: 25px;
      color: #3C7949;
    }
  }
}

Tell Sass to watch the file and update the CSS whenever it changes:

sass --watch style.scss:style.css

The generated style.css file is as shown below:

.container h1 {
  font-size: 25px;
  color: #E45456;
}

.container p {
  font-size: 25px;
  color: #3C7949;
}

.container .box h1 {
  font-size: 25px;
  color: #E45456;
}

.container .box p {
  font-size: 25px;
  color: #3C7949;
}

A Cleaner Example: the nav Pattern

The classic use case for nested rules is a navigation menu, where the styles are tightly grouped around a shared nav parent. This example is from the official Sass documentation:

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 {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

The Sass version visually mirrors the HTML structure (ul, li, and a all live inside nav), making the stylesheet easier to read and maintain.

Selector Lists

Nested rules handle selector lists (comma-separated selectors) intelligently. Each complex selector between the commas is nested separately, then the results are combined back into a single selector list.

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

Compiles to:

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

So two outer selectors and two inner selectors produce four combined selectors automatically.

Selector Combinators

You can nest selectors that use combinators (>, +, ~) as well. The combinator can go at the end of the outer selector, at the beginning of the inner selector, or even on its own line between the two.

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

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

// General sibling
p {
  ~ {
    span {
      opacity: 0.8;
    }
  }
}

Compiles to:

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

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

p ~ span {
  opacity: 0.8;
}

The Parent Selector (&)

When you nest a selector, Sass gives you a way to refer to the parent selector directly: the & character. This lets you produce selectors where the parent is not simply an ancestor: for example pseudo-classes, pseudo-elements, or compound selectors where the parent and the nested selector apply to the same element.

Pseudo-classes and pseudo-elements

.button {
  background: blue;

  &:hover {
    background: darkblue;
  }

  &:focus {
    outline: 2px solid blue;
  }

  &::after {
    content: " →";
  }
}

Compiles to:

.button {
  background: blue;
}
.button:hover {
  background: darkblue;
}
.button:focus {
  outline: 2px solid blue;
}
.button::after {
  content: " →";
}

Without &, writing :hover nested inside .button would compile to .button :hover (a descendant element being hovered), almost certainly not what you want.

Compound selectors and BEM-style naming

& is also useful for suffixing the parent selector, which is common in methodologies like BEM:

.card {
  background: white;

  &--highlighted {
    background: yellow;
  }

  &__title {
    font-size: 1.5rem;
  }

  .is-active & {
    border-color: green;
  }
}

Compiles to:

.card { background: white; }
.card--highlighted { background: yellow; }
.card__title { font-size: 1.5rem; }
.is-active .card { border-color: green; }

SCSS vs. Sass Syntax

Nested rules work in both syntaxes. In the indented .sass syntax, nesting is indicated by indentation (no braces, no semicolons):

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

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

Compiles to the same CSS as the SCSS version.

⚠️ Don't Over-Nest

A common guideline is to limit nesting to 2–3 levels. Deep nesting produces long, brittle selectors like .container .box .inner .card .title, which are hard to override and slow to match.

When nesting gets too deep, flatten the structure or use the parent selector (&) to build compound selectors instead of deeply descendant ones.

Summary

Nested rules are one of Sass's most popular features: they keep related styles grouped together, mirror the HTML structure, and cut down on repetitive selector typing.