2023.10.13: コーディング

【SCSS入門】ネストの基本

: しょうしょ

みなさまお久しぶりです！

今回は、CSSをより効率的に記述できる言語であるSCSSの入門です！
私自身、職業訓練校時代にはCSSでスタイルを設定していましたが、入社してSCSSを使用してみて効率的でかつ簡単にコードを書くことができると思ったためご紹介します。

INDEX

ネストの基本
ネストの例
CSSでもネストが使用可能になりました！
- SCSSではできて、CSSではできない書き方
- CSSのネストが対応しているブラウザ
まとめ

ネストの基本

SCSSは、より効率的なCSSコードを書くのに役立ちます。
SCSSを使用することでネスト、変数、関数などの機能を活用して記述することができます。
そのため、より良いCSSコードをより少ない時間で作成したい場合は、SCSSを使ってみましょう。

ネストの例

子要素、孫要素

SCSSでは、ネストを使うことで、親要素と子要素、孫要素の関係を直感的に表現できます。
例えば、以下のようなコードを考えてみましょう。

 .header {
	background-color: #000;
	color: #fff;
}
.header_logo {
	font-size: 20px;
}
.header_logo a {
	display: block;
	width: 100px;
}

CSSではクラス名ごとにスタイルを指定する必要がありますが、SCSSのネストは、スタイルを階層的に記述するのに便利です。

.header {
	background-color: #000;
	color: #fff;

	&_logo {
		font-size: 20px;

		a {
			display: block;
			width: 100px;
		}
	}
}

このようにSCSSのネストは、CSSをより読みやすく修正しやすくします。
ネストは、親要素からの相対的な位置にスタイルを適用するのに役立ちます。親要素のスタイルが子要素や孫要素にも継承されるため、深い階層の要素をスタイリングする際に効果的です。

メディアクエリ

メディアクエリは、デバイスの幅や特性に基づいてスタイルを変更するためのツールです。
ネストを使用することで、特定のメディアクエリ内でスタイルを定義する場合にも、同じ階層構造を保持したままコードを整理できます。

.inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 20px;

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

このようにすることで、レスポンシブデザインに便利なスタイルを効率的に適用できます。

擬似クラス

擬似クラスもネスト内で活用することができます。例えば、リンクがホバーされた際のスタイルを定義する際に、親要素内で擬似クラスを適用することが可能です。

.button {
	background-color: #3498db;
	color: #fff;
	padding: 10px 20px;
	display: inline-block;
	text-decoration: none;

	&:hover {
		background-color: #2980b9;
	}

	&:active {
		background-color: #1f618d;
	}
}

SCSSのネストを活用することで、擬似クラスを元の要素に関連付けやすくなります。

CSSでもネストが使用可能になりました！

従来、ネストはSCSSなどのプリプロセッサでのみ利用可能でしたが、CSS自体でもネストがサポートされるようになりました。
これにより、プリプロセッサを必要とせずに、ネストの利点を活かすことができます。

<section>
	<title>タイトル</title>
</section>

上記のようなHTMLがあったとします。
CSSのネストに対応したブラウザでは、次のように記述できます。

section{
	.title {
		font-size: 32px;
	}
}

ですが、SCSSなどのCSSプリプロセッサでのネストとCSSのネストは仕様が少し異なります。

SCSSではできて、CSSではできない書き方

要素名のセレクター

先ほどのHTMLで次のようなCSSを記述します。

section {
	h1 {
		color: red;
	}
}

要素名のセレクターの場合は、上記のようにしてもスタイルが当たりません。
そのため、&を使う必要があります。

section {
	& h1 {
		color: red;
	}
}

親要素のクラス名の一部を使った記法

始めに、SCSSではheader_logoを以下のように記述できると説明しました。

.header {
	&_logo {
		//省略
	}
}

こういった使い方はCSSのネストでは使用できません。そのため、CSSで同じ効果を得るには、以下のように記述する必要があります。

.header {
	& .header_logo {
		//省略
	}
}

CSSのネストが対応しているブラウザ

Chrome・Edge・Safariなどでもすでに基本的なサポートは行われており、Firefox 117でも8月29日にリリースされ、ネイティブなCSSでネスト構造を書くことができるように対応が進んでいます。
https://caniuse.com/css-nesting
まだまだ対応ブラウザが少ないので、使用する際には、ブラウザの互換性に注意が必要です。