【アウトプット㊶】-Sass- ネストの基本

ネストとは。。

ネストとは断層で組み合わせていく構文のこと（入れ子構造）
ネストはSassの中でも一番よく使う機能で、CSSをHTMLの構造に合わせて入れ子で書いていくことができます。

ネストの基本

▼HTML

<div id="main">
   <section>
       <h1>見出し</h1>
       <p>段落</p>
       <p class="notes">注意書き</p>
       <ul>
           <li>リスト</li>
       </ul>
   </section>
   <section>
       <h1>見出し</h1>
       <p>段落</p>
   </section>
</div>

▼CSS

#main section {
 margin-bottom: 50px;
}

#main section h1 {
 font-size: 140%;
}

#main section p, #main section ul {
 margin-bottom: 1em;
}

#main section p.notes {
 color: red;
}

▼Sass

#main {
   section {
       margin-bottom: 50px;
       h1 {
           font-size: 140%;
       }
       p, ul {
           margin-bottom: 1em;
       }
       p.notes {
           color: red;
       }
   }
}

CSSで記述すると毎回同じセレクタを指定してサイドの要素だけ変更しているが、Sassで記述すると#mainを何度も書かなくてよいので可視性が向上する。
また、Sassでコードを書くと記述量が減りメンテナンス性も向上する。

例）section を　articlre　に変更する場合

▼Sass

#main {
   articlre {　　　//ここの部分をarticlreに変更するだけ！
       margin-bottom: 50px;
       h1 {
           font-size: 140%;
       }
       p, ul {
           margin-bottom: 1em;
       }
       p.notes {
           color: red;
       }
   }
}

CSSだと何か所も変更が必要になるが、Sassの場合なら1か所のみの変更でOK!