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

---

次回「 変数・演算」