Sassでルールのネスト（Nested Rules）を使用する

ルールのネストは、Sassを記述する上で、最も使用する機能です。
Sassではルールをネストできることで、スタイル（CSS）をHTMLの階層構造（ノード）に合わせてネストして（入れ子で）書くことができます。

今回は、Sassでルールのネストを紹介します。

SassにはSASS記法とSCSS記法がありますが、ここではSASS記法を用いてSassのコードを記述します。

1 ルールのネストで使用するHTML
2 HTMLに適用するCSS
3 Sassでのルールのネストの基本
4 子孫セレクタ以外のセレクタを使う
5 メディアクエリ @media のネスト
6 参考

ルールのネストで使用するHTML

本記事では、Sassでルールのネストを行う際に以下のHTMLを使用します。

<header>
  <h1>メインヘッダー</h1>
</header>
<div id="contents">
  <section>
    <h2>見出し</h2>
    <p>段落1</p>
    <p>段落2</p>
    <p class="notes">注釈</p>
    <ul>
      <li>リスト1</li>
      <li>リスト2</li>
      <li>リスト3</li>
    </ul>
  </section>
  <section>
    <h2>見出し</h2>
    <p>段落1</p>
    <p>段落2</p>
  </section>
</div>

<h1>メインヘッダー</h1>

</header>

<ul>

</ul>

</section>

</section>

</div>

HTMLに適用するCSS

Sassでスタイルを記述する前に、上記に記載したHTMLに設定するスタイルをCSSで記述した場合のコードを見てみます。

header h1 {
  font-size: 50px;
}
#contents section h2 {
  font-size: 30px;
}
#contents section p,
#contents section ul {
  margin-bottom: 1em;
}
#contents section p.notes {
  color: #f00;
}

header h1 {

font-size: 50px;

}

#contents section h2 {

font-size: 30px;

}

#contents section p,

#contents section ul {

margin-bottom: 1em;

}

#contents section p.notes {

color: #f00;

}

CSSでは、それぞれの要素にスタイルを指定するために子孫セレクタを使用し、HTMLの階層をたどって記述していくのが一般的です。

上記のCSSでは、#contentsの子要素のsection要素内にある各要素にスタイルを指定するために、#contents sectionの部分を毎回記述して、後に続く要素（ルール）の指定を変更しています。
section要素内のh2、p、ul、p.notesがそれにあたります。

Sassでのルールのネストの基本

CSSで記述した上記のスタイルをSassで記述すると次のようになります。

header {
  h1 {
    font-size: 50px;
  }
}
#contents {
  section {
    h2 {
        font-size: 30px;
    }
    p, ul {
      margin-bottom: 1em;
    }
    p.notes {
      color: #f00;
    }
  }
}

header {

h1 {

font-size: 50px;

}

#contents {

section {

h2 {

font-size: 30px;

}

p, ul {

margin-bottom: 1em;

}

p.notes {

color: #f00;

}

CSSのコードと比べると重複する部分の#contents sectionを何度も記述する必要がないので、コードがスッキリしています。

Sassを使用したルールのネストは、セレクタの後の波括弧（{ ～ }の部分）の中に子要素のルールを入れ子にして記述します。
入れ子にしているルールをインデントして記述することで、HTMLのツリー構造と同じ形式になるので、要素の構造を把握しやすくなります。（Sassのコードを見るだけでHTMLがどのように記述されているかが、ある程度把握することができます。）
インデントのルールには特に制限はありませんので、インデント幅や改行などは自由に行うことができます。

SassをCSSに変換すると次のコードが得られます。

header h1 {
  font-size: 50px;
}

#contents section h2 {
  font-size: 30px;
}
#contents section p, #contents section ul {
  margin-bottom: 1em;
}
#contents section p.notes {
  color: #f00;
}

header h1 {

font-size: 50px;

}

#contents section h2 {

font-size: 30px;

}

#contents section p, #contents section ul {

margin-bottom: 1em;

}

#contents section p.notes {

color: #f00;

}

SassのコードとCSSのコードを比べると、Sassのコードの方が文字数が少なくて済むのがわかります。
コードの記述量が少ないのでコーディングが楽になりますし、メンテナンス性も向上します。

例えば、上記のスタイルのsectionの部分をarticleに変更する場合、CSSでは4か所を変更することになりますが、Sassの場合は1か所だけ変更すればよいだけです。

CSSの場合

header h1 {
  font-size: 50px;
}

#contents article h2 {
  font-size: 30px;
}
#contents article p, #contents article ul {
  margin-bottom: 1em;
}
#contents article p.notes {
  color: #f00;
}

header h1 {

font-size: 50px;

}

#contents article h2 {

font-size: 30px;

}

#contents article p, #contents article ul {

margin-bottom: 1em;

}

#contents article p.notes {

color: #f00;

}

Sassの場合

header {
  h1 {
    font-size: 50px;
  }
}
#contents {
  article {
    h2 {
        font-size: 30px;
    }
    p, ul {
      margin-bottom: 1em;
    }
    p.notes {
      color: #f00;
    }
  }
}

header {

h1 {

font-size: 50px;

}

#contents {

article {

h2 {

font-size: 30px;

}

p, ul {

margin-bottom: 1em;

}

p.notes {

color: #f00;

}

上記のCSSはSassをコンパイル（変換）するWebサービスの「SassMeister」で変換した結果です。

SassをCSSにコンパイルする環境をお持ちでない方は、SassMeisterでCSSの変換結果を確認してみてください。

SassMeisterについては、以下の記事で紹介していますので、興味のある方はご覧ください。

子孫セレクタ以外のセレクタを使う

上記の例では、子孫セレクタを持つスタイルを定義しましたが、子セレクタや兄弟セレクタなどの子孫セレクタ以外のセレクタでも同様になります。

子セレクタ

#contents {
  section {
    > h2 {
        font-size: 30px;
    }
  }
}

#contents {

section {

> h2 {

font-size: 30px;

}

子セレクタの場合は入れ子になっているセレクタの前に+を記述します。

上記のSassをCSSに変換すると以下のようになります。

#contents section > h2 {
  font-size: 30px;
}

#contents section > h2 {

font-size: 30px;

}

兄弟セレクタ

#contents {
  section {
    + article {
        margin-top: 30px;
    }
    ~ section {
        margin-top: 20px;
    }
  }
}

#contents {

section {

+ article {

margin-top: 30px;

}

~ section {

margin-top: 20px;

}

兄弟セレクタの場合は入れ子になっているセレクタの前に>を記述します。

上記のSassをCSSに変換すると以下のようになります。

#contents section + article {
  margin-top: 30px;
}
#contents section ~ section {
  margin-top: 20px;
}

#contents section + article {

margin-top: 30px;

}

#contents section ~ section {

margin-top: 20px;

}

ネストをしない書き方

子セレクタや兄弟セレクタを使用した上記の例では、セレクタをネストをして記述していましたが、ネストせずに書くこともできます。

#contents {
  section > h2 {
    font-size: 30px;
  }
  section + article {
    margin-top: 30px;
  }
  section ~ section {
    margin-top: 20px;
  }
}

#contents {

section > h2 {

font-size: 30px;

}

section + article {

margin-top: 30px;

}

section ~ section {

margin-top: 20px;

}

ネストせずに書くと多少コードの記述量が増えてしまいますが、定義するルールの数が少ない場合などは、ネストせずに書いた方が分かりやすい場合もあります。

メディアクエリ @media のネスト

ネストはメディアクエリでも使用することができます。

Sass

#contents {
  float: left;
  width: 720px;
  @media screen and (max-width: 720px) {
    float: none;
    width: auto;
  }
}

#contents {

float: left;

width: 720px;

@media screen and (max-width: 720px) {

float: none;

width: auto;

}

CSS

#contents {
  float: left;
  width: 720px;
}
@media screen and (max-width: 720px) {
  #contents {
    float: none;
    width: auto;
  }
}

#contents {

float: left;

width: 720px;

}

@media screen and (max-width: 720px) {

#contents {

float: none;

width: auto;

}

メディアクエリがネストで記述できると、関連するスタイルのすぐ近くに記述することができるので、コードが分かりやすくなります。

従来のCSSの場合だと、ネストができないのでメディアクエリの部分を、関連するスタイルと離れたところに記述しなければなりませんでしたが、ネストを利用して記述することでコードの関連性がつかみやすくなります。

参考

Sassで使えるルールのネストは、CSSに比べてコードの記述量を減らすことができます。
また、HTMLのツリー構造に合わせて記述できるのでコードの見通しも良くなります。
Sassでスタイルを記述することでコードの保守性が向上しますので、大規模なプロジェクトなどでは、CSSからSassに移行することを検討してみてはいかがでしょうか。

本記事では、以下の書籍を参考にさせていただきました。
「Web制作者のためのSassの教科書改訂2版 Webデザインの現場で必須のCSSプリプロセッサ」は、Sassを学習するのであれば、是非とも持っておきたい1冊になります。

リンク