DEV Community

Cover image for SCSS Nesting
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

SCSS Nesting

This is, without a doubt, my favorite part of SCSS. Nesting is used to nest code inside each other; it's very versatile.
Meaning, in the long term, it will make you think twice about naming because it's easier to sort.

Basic SCSS Nesting

In basic nesting can be used as follows

Let's take the following HTML

<ul>
  <li>
    <a href="https://daily-dev-tips.com/" target="_blank">Daily Dev Tips</a>
  </li>
</ul>
Enter fullscreen mode Exit fullscreen mode

We can then make some cool SCSS like this

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  li {
    display: inline-block;
    background: #333;
    a {
      padding: 10px;
      color: #efefef;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

This will then render in the following CSS

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul li {
  display: inline-block;
  background: #333;
}
ul li a {
  padding: 10px;
  color: #efefef;
}
Enter fullscreen mode Exit fullscreen mode

This looks like the following Codepen.

See the Pen SCSS Basic Nesting by Chris Bongers (@rebelchris) on CodePen.

Alt Text

SCSS Dash Nesting

Another really cool one is class nesting

<div class="box">
  <div class="box-inner">
    <h1 class="box-inner-title">
      Welcome 👏
    </h1>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

And we can then use the following SCSS

.box {
  background: #ebc3db;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  &-inner {
    background: #c09bd8;
    padding: 20px 40px;
    border-radius: 20px;
    &-title {
      color: #ede3e9;
      font-size: 2rem;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Cool right! It just makes it more easy and clear what a part of your CSS is for.

SCSS Sub Nesting

We can also use sub nesting for our pseudo-selectors.

.box {
  &-inner {
    &:hover {
      background: #9f84bd;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

As you can see, these also use the & sign, and can be used for hovers but also nth-child etc.

This will result in the following Codepen.

See the Pen SCSS Basic Nesting Dash by Chris Bongers (@rebelchris) on CodePen.

Alt Text

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (0)