CSSでもネスト（入れ子）が正式に対応し、Sassとほぼ同じような感覚でCSSを記述できるようになりました。
2023年8月にFirefox 117がリリースされ、主要ブラウザすべてでネストが利用可能になり、コーディングの快適さが飛躍的に向上しています。
ネストの基本
親セレクターの中に子セレクターを入れられます。例えば次のHTMLがあった場合、
<div class="container">
<div class="child">Child</div>
</div>
従来のCSSでは、下記のように書いていましたが、
.container .child {
color: red;
}CSSネストに対応したブラウザでは次のように書けます。
.container {
& .child {
color: red;
}
}Chrome 120、Edge 120、Safari 17.2、Firefox 117以降では要素セレクターをネストする際に&が不要になりましたが、古いブラウザでは&がないと正しく解釈されず、スタイルが適用されないケースがあります。
そのため、ユーザーのブラウザ環境が混在しているサイトでは、例のように&を明記する形で書くのがおすすめです。
SASSとは？
Sass（サス、Syntactically Awesome Style Sheets）は、CSSをより効率的に管理・記述するためのCSS拡張言語です。Sassを使うことで、変数や計算、ネスト、ミックスイン、継承など、CSSだけでは書けない便利な構文を使ってスタイルを組み立てられます。
Sassで書いたファイルはWP-SASSなどのビルドツールなどでコンパイルし、最終的にブラウザで読み込める普通のCSSに変換して利用します。
SASSでできること
変数
カラーコードやフォントサイズなどを変数として管理できるので、一箇所変えるだけで全体を一括修正可能です。
$main-color: red;
.button {
color: $main-color;
}
ネスト
親要素と子要素の関係をそのままコードに反映でき、CSSの階層構造をわかりやすく書けます。
ミックスイン
複数のスタイルをまとめて使い回せる仕組みです。引数を使って条件によって値を変えることもできます。
演算
Sass上で計算して幅やマージンを決めるなど、柔軟なレイアウト設計ができます。
SASSとCSSの違い
CSSは基本的に静的な記述言語で、ブラウザが直接読み込んで解釈します。
一方、Sassはプリプロセッサなので、Sassで書いたコードをそのままブラウザは理解できません。
コンパイルしてCSSに変換する必要があります。
Sass独自の機能であったネストは、2023年以降のCSS進化によりネイティブCSSでも一部実現できるようになりました。
ただし、Sassにはネスト以外にも変数やミックスインなど便利な機能が多く、大規模プロジェクトや共通デザインの管理にはSassを使うメリットがあります。
一方、CSSだけで完結させたい、ビルド環境を用意できない、小規模な案件などではCSSネストを活用すれば、Sassのようにシンプルでわかりやすいスタイル設計が可能です。
まとめ
CSSネストを使うことで、コードが簡潔になり、関心ごとをまとめて管理しやすくなります。
Sass経験者は、ほぼ同じ書き方で利用できるため学習コストも低く、すぐに現場で活用できます。
CSSネストを上手に使いこなし、保守性・可読性の高いコーディングを実現しましょう！
