こんにちは。macco（まっこ）です。
最近CSSのメタ拡張言語であるSassについて勉強し始めました。
今回はSassの基本機能の1つネスト（入れ子）について簡単に解説します。
こんな人にオススメ
- CSSがある程度理解できている
- Sassを使い始めようとしているが、どこから手をつけていけばいいか分からない
- Sassの開発環境は用意できている
- Sassのネストについて知りたい
本記事では良く使われているSCSS記法を用いて解説します。
またSassの開発環境が構築できていない方は、以下の記事をご参考ください。
ネスト（入れ子）とは
Sassでは、以下のようにCSSのプロパティと値をネスト（入れ子）にして書くことができます。
style.scss
.mainセレクタの中に.boxセレクタを書き、さらにh1セレクタとpセレクタを中に書いています。
.main {
.box {
margin: 20px;
padding: 20px;
border-radius: 8px;
border: 1px solid #333;
h1 {
font-size: 24px;
color: cadetblue;
}
p {
font-size: 16px;
color: coral;
}
}
}上記コードをコンパイルしCSSファイルに変換すると、以下の内容になります。
style.css
.main .box {
margin: 20px;
padding: 20px;
border-radius: 8px;
border: 1px solid #333;
}
.main .box h1 {
font-size: 24px;
color: cadetblue;
}
.main .box p {
font-size: 16px;
color: coral;
}
/*# sourceMappingURL=style.css.map */参考までに使用したHTMLとブラウザの表示画面を掲載します。
index.html
※bodyタグ以降を抜粋
<body>
<main class="main">
<div class="box">
<h1>ボックス1</h1>
<p>ボックス1のテキスト</p>
</div>
<div class="box">
<h1>ボックス2</h1>
<p>ボックス2のテキスト</p>
</div>
</main>
</body>ブラウザで表示される画面です。
ネスト（入れ子）のパターン
ネスト（入れ子）の書き方は、数種類のパターンがあります。
以下、分かる範囲で箇条書きにしました。
※漏れている可能性がありますので、その際はTwitter等でご指摘いただけると大変助かります。
- セレクタのネスト
- 子セレクタ
- 子孫セレクタ
- 隣接セレクタ
- 関節セレクタ
- プロパティのネスト
- 親セレクタの参照（複数クラスのネスト）
- 疑似クラスのネスト
- 疑似要素のネスト
- メディアクエリのネスト
たくさんのパターンがありますが、今回は分かりやすいところを抜粋して解説します。
セレクタのネスト
ここからは簡単に理解できそうなものをピックアップして解説します。
以下のHTMLを使用します。
index.html
<body>
<main class="main">
<p>.mainの子セレクタ</p>
<div class="box">
<h1>ボックス1</h1>
<p>ボックス1のテキスト</p>
</div>
<div class="box">
<h1>ボックス2</h1>
<p>ボックス2のテキスト</p>
</div>
</main>
</body>
</html>子セレクタ
.mainセレクタの子セレクタであるpセレクタを指定する書き方は以下のとおりです。
ネストをするpセレクタの先頭に”>”を記述します。
style.scss
.main {
> p {
color: red;
}
}style.css
.main > p {
color: crimson;
}
/*# sourceMappingURL=style.css.map */ブラウザで表示される画面
子孫セレクタ
子孫セレクタを指定する場合は、ネストをするセレクタ（この場合pセレクタ）を先頭にして記述します。
style.scss
.main {
p {
color: blue;
}
}style.css
.main p {
color: blue;
}
/*# sourceMappingURL=style.css.map */ブラウザで表示される画面
疑似クラスのネスト
疑似クラスのネストも使う機会が多いと思うのでhoverを例に解説します。
以下のHTMLを使います。
index.html
<body>
<main class="main">
<a href="">疑似クラスhoverを適用する</a>
</main>
</body>疑似クラスを指定する場合は、ネストをするセレクタ（この場合aセレクタ）の先頭に”&”を記述し、続けて:hoverを記述します。
style.scss
.main {
a {
color: blue;
&:hover {
color: deeppink;
}
}
}style.css
.main a {
color: blue;
}
.main a:hover {
color: deeppink;
}
/*# sourceMappingURL=style.css.map */ブラウザで表示される画面
hover前
hover後
ネスト（入れ子）のパターンの一部の解説は以上となります。
終わりに
今回はSassの基本機能の1つネストについて、大まかに解説してきましたがいかがでしたでしょうか。
覚えることも多く、どこまで覚えたら良いか悩むこともあると思います。
私も勉強していてどこまで掘り下げるかいつも悩んでいます。
すべてを知る必要はありませんが、実際に実務で利用できる書き方としてある程度探りながら覚えていくしかありません。
まわりに聞く人がいれば、まだやりやすいのですが、多くは1人で積み上げていると私は勝手に想像しています。
少しでも進めて、積み上げていくことが身に染みていくことにつながる。私はそう信じています。
焦らず、ゆっくりじっくり取り組んでいきましょう。
最後までお読みいただきどうもありがとうございました。
