Sass/SCSS Nesting Tutorial

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.

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.

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.

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 combinators .

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

ul > {

  li {
    color: #191919;
  }
}

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

ul {

  > li {
    color: #191919;
  }
}

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

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.

a {
  color: #2e647e;

  &:hover {
    color: #121212;
  }

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

a {
  color: #2e647e;
}

a:hover {
  color: #121212;
}

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

The parent selector is also very useful when using a methodology like BEM where class names are structured.

.form {
  border: 1px solid #ccc;

  &__submit {
    padding: 1rem .5rem;

    &--disabled {
      cursor: no-drop;
    }
  }
}

.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. We often only nest a single level deep.

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.