SASSのネスト
この記事ではSASSのネストについて説明します。
SASSのネストをステップバイステップで解説し、理解を深めるためのサンプルコードを交えて説明します。
YouTube Video
SASSのネスト
SASSは、CSSを拡張したスタイルシート言語であり、効率的なスタイリングを可能にする多くの機能を提供します。その中でもネストは、CSSの階層構造を視覚的に表現するために特に便利な機能です。
ネストの基本
SASSでは、CSSセレクタを階層構造で記述することで、視覚的にコードを整理することができます。例えば、次のCSSコードをネストを使ってどのように書けるか見てみましょう。
1/* CSS */
2.nav {
3 background-color: #333;
4}
5.nav ul {
6 margin: 0;
7 padding: 0;
8}
9.nav ul li {
10 list-style: none;
11}
12.nav ul li a {
13 color: #fff;
14 text-decoration: none;
15}このコードはSASSを使うと、以下のようにネストを使って簡潔に書けます。
1/* SASS */
2.nav {
3 background-color: #333;
4
5 ul {
6 margin: 0;
7 padding: 0;
8
9 li {
10 list-style: none;
11
12 a {
13 color: #fff;
14 text-decoration: none;
15 }
16 }
17 }
18}- このコードは、SASSのネスト機能を使ってナビゲーションメニューのスタイルを階層的に簡潔に記述しています。ネストを使うことで、親子関係が視覚的に明確になり、可読性が向上します。
親セレクタの参照（&）
ネストされたスタイルの中で、親セレクタを参照する必要がある場合、&を使用します。これにより、特定の状態や修飾子を追加したセレクタを作成できます。
1.button {
2 background-color: #007bff;
3 color: #fff;
4
5 &:hover {
6 background-color: #0056b3;
7 }
8
9 &:active {
10 background-color: #003f7f;
11 }
12}- このコードは、SCSSで
&を使って親セレクタ.buttonに対する:hoverや:activeの状態を定義しています。
生成されるCSS
1.button {
2 background-color: #007bff;
3 color: #fff;
4}
5.button:hover {
6 background-color: #0056b3;
7}
8.button:active {
9 background-color: #003f7f;
10}メディアクエリのネスト
SASSでは、メディアクエリもネスト可能です。これにより、スタイルの関連性を維持しながらレスポンシブデザインを実装できます。
1.container {
2 width: 100%;
3
4 @media (min-width: 768px) {
5 width: 750px;
6 }
7
8 @media (min-width: 1024px) {
9 width: 970px;
10 }
11}- このコードは、
.containerクラスに対してメディアクエリをネストし、画面幅に応じて幅を切り替えるレスポンシブデザインを実現しています。
生成されるCSS
1.container {
2 width: 100%;
3}
4@media (min-width: 768px) {
5 .container {
6 width: 750px;
7 }
8}
9@media (min-width: 1024px) {
10 .container {
11 width: 970px;
12 }
13}ネストの注意点
ネストを使いすぎると、コードが深くなりすぎて保守性が低下することがあります。以下のような深いネストは避けるべきです。
1.header {
2 .nav {
3 ul {
4 li {
5 a {
6 color: red;
7 }
8 }
9 }
10 }
11}このようなコードは深すぎるため、以下のように整理できます。
1.header .nav ul li a {
2 color: red;
3}実用例: ナビゲーションバー
以下は、SASSのネストを使ったナビゲーションバーのスタイル例です。
1.navbar {
2 background-color: #222;
3 color: #fff;
4
5 ul {
6 display: flex;
7 list-style: none;
8 margin: 0;
9 padding: 0;
10
11 li {
12 margin-right: 15px;
13
14 a {
15 color: #fff;
16 text-decoration: none;
17
18 &:hover {
19 text-decoration: underline;
20 }
21 }
22 }
23 }
24}- このコードは、SASSのネストを用いてナビゲーションバー内のリストとリンクのスタイルおよびリンクのホバー効果を整理して定義しています。
生成されるCSS
1.navbar {
2 background-color: #222;
3 color: #fff;
4}
5.navbar ul {
6 display: flex;
7 list-style: none;
8 margin: 0;
9 padding: 0;
10}
11.navbar ul li {
12 margin-right: 15px;
13}
14.navbar ul li a {
15 color: #fff;
16 text-decoration: none;
17}
18.navbar ul li a:hover {
19 text-decoration: underline;
20}まとめ
SASSのネスト機能は、CSSの階層構造を簡潔に記述し、可読性を向上させる強力なツールです。ただし、過剰なネストを避け、適切に整理することが重要です。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。