scss~入れ子構造~

scssを使うメリットはいくつかありますが代表的なものに入れ子がありますね。
それではみていきましょう！！

index.html

<link rel="stylesheet" href="sample.css">
<section>
  <div class="case1">あいうえお</div>
  <div class="case2">かきくけこ</div>
</section>

cssの読み込みを忘れないように！！

さて！それでは、scssを書いていきましょう！！

main.scss

section {
  background-color: pink;
  .case1 {
    background-color: rebeccapurple;
    .case2 {
      background-color: royalblue;
    }
  }
}

いつもだとこれでブラウザ表示するのですが、これではまだ反映されません🥲

ここでターミナルを開きます👌

% sass scss/main.scss:css/main.css
% less css/main.css

この流れでしたね！！それぞれはどのような意味があるのかは
▶https://qiita.com/akari_0618/items/14f53a8b3586785f15b3
こちらの記事を参照してください👍

ブラウザで開いてこうなれば大丈夫です！！
完璧ですね😊