【CSSネスト vs Sass】できること・できないことを徹底比較!!

本来SassをコンパイルすることでCSSに変換されますが、
CSSにネスト機能が導入され、Sassのような書き方が可能になりつつあります。
しかし、まだ完全に同じではありません。
本記事では、CSSネストとSassそれぞれで「できること」「できないこと」を比較し、どのように使い分けるべきかを解説します。

CSSネストでできること

CSSネストを使用することで、Sassのような構造的なスタイル記述が可能です。
以下に、具体的な例を示します。

01. 擬似クラス・擬似要素のネスト

CSSネストでは、& を利用して親セレクタを参照し、擬似クラスや擬似要素をネストできます。

/* CSS */
.button {
  &:hover {
    color: blue;
  }

  &::before {
    content: '★';
  }
}

02. 子セレクタのネスト

親子関係を明確に表現できます。

/* CSS */
.parent {
  & .child {
    margin: 10px;
  }
}

03. 隣接セレクタや兄弟セレクタのネスト

隣接セレクタや兄弟セレクタも簡潔に記述できます。

/* CSS */
.list-item {
  & + & {
    margin-top: 5px;
  }
}

04. :has() の利用

&:has() を使うことで、特定の子要素を持つ親要素にスタイルを適用できます。

/* CSS */
.card {
  &:has(.active) {
    border: 2px solid red;
  }
}

05. メディアクエリ内のネスト

メディアクエリもネスト可能です。

/* CSS */
.container {
  @media (min-width: 768px) {
    & {
      width: 80%;
    }
  }
}

CSSネストでできないこと

CSSネストは便利ですが、Sassの高度な機能には対応していません。以下に、CSSネストではできない主なことを挙げます。

01. 変数の使用

CSSネストでは、Sassの $variable は使えません。
ただし、CSSカスタムプロパティ（–variable）を代用できます。

// Sass
$primary-color: blue;
.button {
  color: $primary-color;
}

CSSでの代替方法：

/* CSS */
:root {
  --primary-color: blue;
}

.button {
  color: var(--primary-color);
}

02. ミックスイン（Mixins）の使用

再利用可能なスタイルテンプレートを定義するSassの @mixin 機能はCSSにはありません。

// Sass
@mixin border-radius($radius) {
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

03. 条件分岐とループ

Sassの @if や @for などの条件分岐やループはCSSでは使用できません。

// Sass
@for $i from 1 through 5 {
  .item-#{$i} {
    width: 20px * $i;
  }
}

04. セレクタの省略

Sassでは親セレクタを省略して書ける場合がありますが、CSSでは必ず & を明示する必要があります。

// Sass
.button {
  hover {
    color: blue;
  }
}

CSSでの記述：

/* CSS */
.button {
  &:hover {
    color: blue;
  }
}

05. 関数の作成

Sassでは @function を使って独自の関数を作成できますが、CSSにはこの機能はありません。

// Sass
@function calculate-spacing($base, $multiplier) {
  @return $base * $multiplier;
}

.container {
  margin: calculate-spacing(10px, 2);
}

CSS VS Sass まとめ表

記述方法対応表

機能	CSSネストで可能	Sassで可能	備考
擬似クラスのネスト	✅	✅	CSSでは & が必要
擬似要素のネスト	✅	✅	同上
子・隣接セレクタのネスト	✅	✅	同上
メディアクエリのネスト	✅	✅	CSSではネスト対応済
変数の使用	❌	✅	CSSは –variable と var() を代用
ミックスイン	❌	✅	再利用可能なスタイルテンプレートはSassのみ対応
条件分岐・ループ	❌	✅	動的スタイル生成はSassの強み
セレクタの省略	❌	✅	CSSでは必ず & を使う必要がある
独自関数の作成	❌	✅	Sassでは柔軟な関数作成が可能

ブラウザ対応状況

CSSネストは最新仕様であり、対応状況に注意が必要です。
以下は2024年12月現在の対応ブラウザ情報です。

ブラウザ	対応状況	バージョン
Google Chrome	✅ 対応済み	112以降
Mozilla Firefox	✅ 対応済み	113以降
Safari	✅ 対応済み	16.4以降
Microsoft Edge	✅ 対応済み	112以降
Opera	✅ 対応済み	98以降

まとめ

CSSネストはSassの一部機能に追いついており、シンプルなスタイル定義には十分対応しています。
しかし、動的なスタイル生成や再利用性を重視する場合には、Sassが依然として優れています。
プロジェクトの規模や要件に応じて、CSSネストとSassを使い分けましょう。