Sassでネスト

ネストはSassの中でもよく使う機能のひとつで、CSSをHTMLの構造に合わせて入れ子で書いていくことができます。
このネストを使うことで何度も親要素を書かなくても良くなり、ノードの見通しも良くなるのでメンテナンス性が向上します。

---

子孫セレクタ

子孫セレクタは、要素の子孫（入れ子構造）にあたる要素。
たとえば、<main>〜<main>の要素に対して以下のようなCSSを書いたとします。

main {
  width: 100%;
}
main section {
  width: 600px;
  margin: auto;
}
main section h1 {
  font: normal 1.4rem/1.6 sans-serif;
  color: red;
}
main section p {
  font-size: 1rem;
  color: black;
}

これをSass（SCSS記法）で書くと次のようになります。

main{
  width: 100%;
  section{
    width: 600px;
    margin: auto;
    h1{
      font: normal 1.4rem/1.6 sans-serif;
      color: red;
    }
    p{
      font-size: 1rem;
      color: black;
    }
  }
}

ネストすることにより、子孫関係を明示して出力されます。

親要素の変更

ネストでメンテナンス性が向上します。例えば、先ほどの指定した<main>〜<main>のスタイルを<div id="content">〜</div>に変更したい場合は

 #content{
  width: 100%;
  section{
.
.
.

と変更するだけで、内包していた要素の親をすべて#contentに変更してくれます。

#content {
  width: 100%;
}
#content section {
  width: 600px;
  margin: auto;
}
#content section h1 {
  font: normal 1.4rem/1.6 sans-serif;
}
#content section p {
  font-size: 1rem;
  color: black;
}

---

隣接セレクタ、子セレクタ

隣接セレクタは要素同士が直接隣接している場合に適用されるセレクタ。この隣接セレクタもネスト構造に指定することができます。

Tips

• 隣接セレクタ `+`：要素と要素が直接隣接している場合に適用されるセレクタ。
• 子セレクタ `>`：親要素の子要素に適用されるセレクタ。孫要素以下は適用されない。

main{
  width: 100%;
  + section{
    margin: 0 auto 50px;
  }
  section{
    width: 600px;
    margin: auto 50px;
    > h1{
      font: normal 1.4rem/1.6 sans-serif;
      color: red;
    }
    p{
      font-size: 1rem;
      color: black;
    }
  }
}

↓ ↓ ↓ ↓ コンパイル ↓ ↓ ↓ ↓

main {
  width: 100%; }
  main + section {
    margin: 0 auto 50px; }
  main section {
    width: 600px;
    margin: auto 50px; }
    main section > h1 {
      font: normal 1.4rem/1.6 sans-serif;
      color: red; }
    main section p {
      font-size: 1rem;
      color: black; }

---

親セレクタの参照

親セレクタによってスタイルを振り分けたい場合には、親セレクタを参照できる&アンパサンドを使用します。
トップページではmainの幅を変えたい場合を例として見てみましょう。

#home{
  width: 100%;
}
main{
  width: 100%;
  body#home &{
  width: 50%;
  margin: auto;
  }
  section{
  width: 600px;
  margin: auto 50px;
  }
}

↓ ↓ ↓ ↓ コンパイル ↓ ↓ ↓ ↓

#home {
  width: 100%;
}

main {
  width: 100%;
}
body#home main {
  width: 50%;
  margin: auto;
}
main section {
  width: 600px;
  margin: auto 50px;
}

このように#homeを親に持つmainを書き分けてくれるので、親要素が変わったmainでもネスト内に書き込めるて可動性が上がっているのが分かります。

---

疑似クラスやセレクタからの参照

親要素の参照は疑似クラスやセレクタの前にも使えます。:after、:beforeや、:first-childなどの疑似セレクタ、:hoverや:activeなどの疑似クラスもアンパサンドで親要素を参照して書くことができます。

main{
  width: 100%;
  .gNav{
    width: 50%;
    margin: auto;
    a{
      color: black;
      &:hover{
      color:red;
      }
      &.prev{
        float: left;
        &:before{
          content: "<";
        }
      }
      &.next{
        float: right;
        &:after{
          content: ">";
        }
      }
    }
  }
}

↓ ↓ ↓ ↓ コンパイル ↓ ↓ ↓ ↓

main {
  width: 100%;
}
main .gNav {
  width: 50%;
  margin: auto;
}
main .gNav a {
  color: black;
}
main .gNav a:hover {
  color: red;
}
main .gNav a.prev {
  float: left;
}
main .gNav a.prev:before {
  content: "<";
}
main .gNav a.next {
  float: right;
}
main .gNav a.next:after {
  content: ">";
}

---

Sassのネストで隣接セレクタや参照を使用することで可読性がアップすることはご理解いただけたでしょうか。
しかし、参照を使用しているセレクタと使用していないセレクタが混在していると逆に可読性が悪くなってしまったりするので、記述ルールを決めて使用することをお勧めします。

---

次回「 変数・演算」