Sass/SCSS Nesting Tutorial

In this Sass/SCSS tutorial we learn how to nest CSS selectors inside other selectors.

We also cover nesting with combinators and the parent selector.

Lastly we quickly discuss how deep you should nest.

Here's a table of contents of what you'll learn in this lesson:
(click on a link to skip to its section)

Let's jump right in.

What is nesting

Sass allows us to write our styles in a nested hierarchy, like we would in HTML.

We can place selectors inside the code block of other selectors and Sass will automatically combine the outer rule’s selector with that of the inner rule.

This means we don’t have to type the same selectors over and over again, saving on development time.

How to nest selectors

To nest a selector, we simply write it inside the code block of another.

Example: SCSS
nav {
  margin: 1rem .5rem;

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

  li {
    display: inline-block;
    background: #191919;
  }

  a {
    display: block;
    color: #dedede;
    padding: .5rem 1rem;
    text-decoration: none;
  }
}

In the example above, we nest the ul , li and a selectors inside inside the nav selector.

If you’re using indented Sass, remember to indent one level for each level of nesting.

Example: Sass
nav
  margin: 1rem .5rem

  ul
    padding: 0
    list-style: none

  li
    display: inline-block
    background: #191919

  a
    display: block
    color: #dedede
    padding: .5rem 1rem
    text-decoration: none

The nested selectors are at the same indentation level as the nav selector’s properties.

The examples above will compile into the following CSS output.

Output: Compiled CSS
nav {
  margin: 1rem 0.5rem;
}

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

nav li {
  display: inline-block;
  background: #191919;
}

nav a {
  display: block;
  color: #dedede;
  padding: 0.5rem 1rem;
  text-decoration: none;
}

Nesting with combinators

Sass allows us to nest selectors that use combinatorsOpens up in a new page .

We can place the combinator at the end of the outer selector.

Example: SCSS
ul > {

  li {
    color: #191919;
  }
}

Or we can place it at the beginning of the inner selector.

Example: SCSS
ul {

  > li {
    color: #191919;
  }
}

Or we can place it on it’s own line between the two selectors.

Example: SCSS
ul {
  > {
    li {
      color: #191919;
    }
  }
}

Which one to use is up to your personal preference, just remember to be consistent.

We place our combinator before the inner selector throughout this course, but any one of the above are valid.

Nesting with the parent selector

Sass provides us with a special parent selector in the form of the & symbol.

The parent selector refers to the direct outer selector and allows us to use the outer selector in more complex ways.

Basically, it copies and pastes the outer selector wherever the & is used.

Example: SCSS
a {
  color: #2e647e;

  &:hover {
    color: #121212;
  }

  :not(&) {
    color: #444;
  }
}
Output: Compiled CSS
a {
  color: #2e647e;
}

a:hover {
  color: #121212;
}

:not(a) {
  color: #444;
}

The parent selector is also very useful when using a methodology like BEMOpens up in a new page where class names are structured.

Example: SCSS
.form {
  border: 1px solid #ccc;

  &__submit {
    padding: 1rem .5rem;

    &--disabled {
      cursor: no-drop;
    }
  }
}
Output: Compiled CSS
.form {
  border: 1px solid #ccc;
}

.form__submit {
  padding: 1rem 0.5rem;
}

.form__submit--disabled {
  cursor: no-drop;
}

How deep to nest

Nesting selectors is great, but when we nest too deep our code can become confusing and hard to manage. So at what level do we stop?

We recommend that you don’t nest more than 3 levels deep unless you’re using a specific methodology like BEM.

Ultimately, the choice is up to you and what you prefer. The important part is that you stay consistent.

Summary: Points to remember

  • Sass allows us to nest selectors hierarchically by writing them inside the code blocks of other selectors.
    • In SCSS we nest between the open and close curly braces.
    • In indented Sass we nest with an extra indentation for each level.
  • When nesting with combinators we can place the combinator on the outer selector line, the inner selector line, or on its own line.
  • Sass provides us with the special & parent selector that refers to the current nesting’s parent and can be used as name replacement.
  • Ideally, developers shouldn’t nest more than 3 levels deep.