実は素のCSSでもネストできる　ーCSSネスト構文まとめー

<div class="parent">
  <div class="child">
    sample
  </div>
</div>

.parent {
  .child {
    color: red;
  }
}

/*もしくは、このような書き方もできます*/

.parent {
  & .child {
    color: red;
  }
}

/*要素タグも直接いける*/

.parent {
  div {
    color: red;
  }
}

.foo,
.bar {
  .text {
    color: red;
  }
}

/*👇👇👇従来の書き方だとこうなる*/

.foo .text,
.bar .text {
  color: red;
}

.parent{
  .foo,
  .bar{
     color:blue;
  }
}

/*👇👇👇従来の書き方だとこうなる*/

.parent .foo,
.parent .bar {
  color: blue;
}

.parent{
　　　　　&:hover{
　　　　　　　　　　color:green;
　　　　　　}
}

.parent{
　　　　　&::after{
　　　　　　　　　　position:absolute;
　　　　　　}
}

.parent{
  @media (min-width: 768px) {
    width:80%;
  }
}

.link {
  &_list {
    color: red;
  }
}