• CSS

【SCSSの入門】入れ子（ネスト）の使い方【アンパサンド】

投稿日:2025年09月01日

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

CSSをより効率的に、そしてスマートに書くための拡張言語「SCSS」。最近になってようやくSCSSを使い始めた私が、その学習過程で特に便利だと感じた機能や、つまずいたポイントなどを備忘録としてまとめました。これからSCSSを始める方や、基本的な使い方を再確認したい方の参考になれば幸いです。

SCSSとは？

SCSS（Sassy CSS）は、CSSをより効率的に、そして保守しやすくするための言語です。CSSにはない便利な機能が多数追加されており、以下のような特徴があります。

• 変数を定義できる。
• セレクターを入れ子にして書ける。
• スタイルのまとまりを再利用できる。
• 複数のセレクターで同じスタイルを継承できる。

本記事ではSCSSにおける入れ子の記法をご紹介します。

なお、SCSSで書いたコードは最終的にブラウザが理解できるCSSにコンパイル（変換）しなければ使用できません。

別の記事にて、VSCodeの拡張機能を使ってSCSSをコンパイルする方法をご紹介していますの、よろしければそちらもご覧ください。

入れ子を使うメリット

CSSでは、親子関係にある要素を指定する際、同じセレクターを何度も繰り返し記述する必要があります。

その結果「.header .nav .list li a」のように、セレクターが長くなり、コードが読みにくくなってしまいがちです。

SCSSの入れ子（ネスト）を使えば、この問題を解決し、親子関係を視覚的に分かりやすく記述できます。

【メリット1】コードの重複をなくし、記述量を削減

親セレクターを繰り返し書く必要がなくなるため、コード量が大幅に減ります。タイピングの手間が省け、コーディング速度が向上します。

【メリット2】HTML構造との同期

CSSのコードがHTMLの入れ子構造と一致するため、コードの対応関係が直感的に理解しやすくなります。共同開発や既存コードの改修時に、どこにどのスタイルが適用されているかすぐに分かります。

【メリット3】保守性の向上

親セレクターの名前を変更した場合でも、子要素の記述を修正する必要がありません。親セレクターを一つ変更するだけで、その中のすべてのスタイルに適用されます。大規模なプロジェクトでは特に、このメリットが大きな効果を発揮します。

SCSSの入れ子（ネスト）の書き方

SCSSの入れ子は以下のように記述します。

例として下記のようなCSSをSCSSで入れ子を使って書き換えてみます。

CSSでは階層が深くなるにつれセレクターの記述が長くなりますし、親子関係も一目でわかりません。

.header {
  background-color: #333;
}
.header .nav {
  display: flex;
}
.header .nav ul {
  list-style: none;
}
.header .nav ul li {
  margin: 0 10px;
}
.header .nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}
.header .nav ul li a:hover {
  text-decoration: underline;
}

続いてSCSSで入れ子にして記述した場合を見てください。

.header {
  background-color: #333;
  .nav { // 第一階層
    display: flex;
    ul { // 第二階層
      list-style: none;
      li { // 第三階層
        margin: 0 10px;
        a { // 第四階層
          color: white;
          text-decoration: none;
          font-weight: bold;
          &:hover { // 親セレクターaのマウスホバー時
            text-decoration: underline;
          }
        }
      }
    }
  }
}

入れ子を使った方が親子関係が視覚的に分かりやすく、コードが簡潔になります。

「＆（アンパサンド）」の役割と使い方

SCSSの入れ子において「＆（アンパサンド）」は、簡単に言うと「親セレクター」を参照する役割を持ちます。

例えば親セレクターのマウスホバー時のスタイルを記述したい場合は以下のように「＆」を使います。

.button {
  color: #fff;
  background-color: #007bff;
  &:hover { // .button:hover にコンパイルされる
    background-color: #0056b3;
  }
}

親セレクターの名前が変わっても、「＆（アンパサンド）」を使っていれば子セレクターの修正は不要です。

「＆」を用いることで要素の擬似クラスや擬似要素を表現することが可能になります。

よく使う擬似クラスと「＆」を用いた記述の例

よく使う擬似要素と「＆」を用いた記述の例

組み合わせたクラスを表現する例

親要素に対し、特定の状態を示す「.open」というクラスを追加した場合⇒「&.open」

まとめ

以上がSCSSにおける入れ子（ネスト）の使い方です。

HTMLの親子関係をそのまま反映した形でコードを記述でき、セレクターの重複をなくすことができます。