【Sass実践編】CSSの管理が楽になる「ネスト」を使ってみよう！書き方と利点を解説！

2021.04.16

WEB

Webデザイン

前回の記事（Sassの利用環境を構築しよう！gulpを使ってCSSにコンパイルする手順を解説）では、SassをCSSにコンパイルする環境を構築しました。

今回はSassを使って効率的にCSSを記述していくうえで欠かせない機能、ネスト（入れ子）について解説していきます。
この機能を使うと記述をまとめることができるのでCSSの管理が非常に楽になります。ぜひ覚えてください！

INDEX

ネスト（入れ子）とは
ネストの種類その1：子孫セレクタのネスト
ネストの種類その2：メディアクエリのネスト
ネストの種類その3：親要素の参照（アンパサンド）
ネストの種類その4：プロパティのネスト
さいごに

ネスト（入れ子）とは

例えば、下記のようなHTMLを装飾するとします。

<div id="main">
    <div class="contents001">
        <h1 class="title">タイトル</h1>
        <p class="paragraph">
            <span class="test001">テキスト1</span>
            <span class="test002">テキスト2</span>
            <a href="#">リンク1</a>
        </p>
    </div>
    <p>テキスト3</p>
</div>

通常CSSでは対象となる要素までの親要素のセレクタを何度も記述する必要があります。

#main {
  width: 1200px;
  margin: 0 auto;
}

#main .title {
  margin-bottom: 20px;
  font-size: 20px;
}

#main .paragraph .test002 {
  color: #e5004f;
}

この記述方法では、親要素のセレクタを毎回書かなければなりません。
また、#mainというID名に変更があった場合該当となる箇所が複数あるため、修正漏れや置換時の巻き込みリスクがあります。

ネストを使った記述では下記のようになります。

#main {
    width: 1200px;
    margin: 0 auto;
    .title {
        margin-bottom: 20px;
        font-size: 20px;
    }
    .paragraph .test002 {
        color: #e5004f;
    }
}

#mainのなかにルールセットの記述を入れ込むことができるので、CSSと比べ#mainの記述回数が少なくなっています。
これにより修正漏れ等のリスクが減るほか、階層構造が把握しやすくなるのでメンテナンス性が高くなったことが見て取れます。

このように、親要素の中に次のルールセットを入れ子にして記述する機能をネストといいます。

ネストの種類その1：子孫セレクタのネスト

子孫セレクタのネストは波括弧「{}」の中に次のセレクタのルールセットを書くことで記述できます。

#main {
    width: 1200px;
    margin: 0 auto;
    .title {
        margin-bottom: 20px;
        font-size: 20px;
    }
}

コンパイル後のCSSは下記のようになります。

#main {
  width: 1200px;
  margin: 0 auto;
}

#main .title {
  margin-bottom: 20px;
  font-size: 20px;
}

また、子セレクタや隣接セレクタも同様に波括弧の中に記述することでセレクタの指定ができます。

#main {
    width: 1200px;
    margin: 0 auto;
    span {
        + span {
            color: #e5004f;
        }
    }
    > p {
        font-size: 20px;
    }
}

入れ子になっているセレクタの前に「+」や「>」を記述します。コンパイル後は下記のようになります。

#main {
  width: 1200px;
  margin: 0 auto;
}

#main span + span {
  color: #e5004f;
}

#main > p {
  font-size: 20px;
}

ネストの種類その2：メディアクエリのネスト

通常CSSではメディアクエリの記述をした中に対象となるセレクタを記述していきますが、Sassではネストで記述できます。

#main {
    width: 1200px;
    margin: 0 auto;
    @media screen and (max-width: 767px) {
        width: 100%;
    }
}

コンパイル後のCSSは下記のようになります。

#main {
  width: 1200px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  #main {
    width: 100%;
  }
}

ネストを使えば対象となるセレクタの中にメディアクエリを記述することが出来るので、スタイルの関係性が分かりやすくなります。

ネストの種類その3：親要素の参照（アンパサンド）

「&」（アンパサンド）を記述することで親セレクタの参照が出来ます。
これによって、たとえば疑似要素やホバーなどを記述する場合にネストで書くことができるため可読性が上がります。

#main {
    width: 1200px;
    margin: 0 auto;
    a {
        color: #222;
        &:hover {
            color: #00b7ee;
        }
    }
}

コンパイル後のCSSは下記のようになります。

#main {
  width: 1200px;
  margin: 0 auto;
}

#main a {
  color: #222;
}

#main a:hover {
  color: #00b7ee;
}

ネストの種類その4：プロパティのネスト

ネストはセレクタだけでなくプロパティに対しても用いることが出来ます。
たとえば下記のような書き方が出来ます。

#main {
    border: {
        top: 1px solid #ccc;
        bottom: {
            width: 2px;
            style: solid;
            color: #222;
        }
    }
}

コンパイル後のCSSは下記のようになります。

#main {
  border-top: 1px solid #ccc;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #222;
}

ショートハンドで書くことが出来るプロパティはネストすることが出来ます。
通常はネストしても特に可読性が上がる訳ではないので、ショートハンドで書いた方が分かりやすいと思います。
下記のようにショートハンドで書いておいて、一部分だけ上書きするといった場合に使うのが実用的でしょう。

#main {
    border: 1px solid #222 {
        bottom: 0;
    }
}

コンパイル後のCSSは下記になります。

#main {
  border: 1px solid #222;
  border-bottom: 0;
}

さいごに

今回はSassの基本機能であるネストについて解説しました。
ネストを使用すれば、記述量が減り可読性が上がることが分かったかと思います。
しかし階層構造を深くしすぎると、逆に可読性が損なわれてしまいますのでネストの繰り返しには注意しましょう。

この記事を書いた人

加藤陵二ソリューション事業部 webデザイナー: アーティスへ入社後、webデザイナーとして大学サイトや病院サイト、企業サイト等のデザイン・コーディングに携わる。資格：Photoshopクリエイター能力認定試験スタンダード、illustratorクリエイター能力認定試験エキスパート、Webクリエイター能力認定試験初級