Nesting in Sass

Watch "Nesting your styles" on LinkedIn Learning

Nesting in Sass is used to create the same visual hierarchy in CSS as in HTML. Each nested rule will have its parent selector added to its own, allowing for must more readable CSS.

To nest a style rule, simple place the child style inside the parent's style block.

$red: #D14348;

ul {
  list-style: none;

  li {
    margin-bottom: 20px;
    border-top: 1px dotted $red;
    font-size: 2.rem;
  }

  p {
    margin: 0;
    font-size: 1.5rem;
  }
}

The Sass code above will be compiled to the following CSS.

ul {
  list-style: none;
}

ul li {
  margin-bottom: 20px;
  border-top: 1px dotted #D14348;
  font-size: 2rem;
}

ul p {
  margin: 0;
  font-size: 1.5rem;
}

Try it yourself on Sassmeister