グローバルナビゲーションへ

本文へ

フッターへ

お役立ち情報Blog



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

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

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

ネスト(入れ子)とは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ネストの種類 その3:親要素の参照(アンパサンド)

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

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

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

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

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

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

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

さいごに

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

The following two tabs change content below.

加藤 陵二

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

FOLLOW US

最新の情報をお届けします