2023.10.13

コーディング

【SCSS入門】ネストの基本

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

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

ネストの基本

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
まだまだ対応ブラウザが少ないので、使用する際には、ブラウザの互換性に注意が必要です。

まとめ

今回はSCSSの基本機能の1つネストについて紹介しました。

ネストは、CSSを効果的に活用するための重要なテクニックです。要素の階層を考慮してスタイリングすることで、コードの可読性や保守性を向上させることができます

また、CSSの最新仕様でもネストが導入され、これまでSCSSなどのプリプロセッサでしか利用できなかった機能が本格的なCSSでも利用できるようになりました。ですが、ブラウザの互換性に注意しながら、ネストを活用してスタイルを記述することが大切です。

これからもネストを活用して、スタイルの整理や効率的な開発に取り組みましょう!

この記事を気に入ったら

しょうしょ

しょうしょ

好きな色は水色で、スマホケース、洋服、迷ったらだいたい水色です。

この人が書いた記事を見る >>
カモメのアイコンTOP