# 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

```html
<ul>
  <li>
    <a href="https://daily-dev-tips.com/" target="_blank">Daily Dev Tips</a>
  </li>
</ul>
```

We can then make some cool `SCSS` like this

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

This will then render in the following `CSS`

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

This looks like the following Codepen.

%[https://codepen.io/rebelchris/pen/ExPBRvz]

## SCSS Dash Nesting

Another really cool one is class nesting

```html
<div class="box">
  <div class="box-inner">
    <h1 class="box-inner-title">
      Welcome 👏
    </h1>
  </div>
</div>
```

And we can then use the following `SCSS`

```css
.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;
    }
  }
}
```

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.

```css
.box {
  &-inner {
    &:hover {
      background: #9f84bd;
    }
  }
}
```

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.

%[https://codepen.io/rebelchris/pen/zYrVapQ]

### 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](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)