SCSSでネスト(入れ子)の書き方を解説、スタイルシートを効率的に管理する方法

※本記事にはプロモーションが含まれています。

Sassでスタイルシートの記述を効率化し、保守性を向上させるネストについて解説します。

ネストを活用することで、CSSをより迅速かつ効率的に構築することが可能です。
そのため、Sassにおいてはほぼ必須の機能となりますが、簡単に利用することができますので、積極的に覚えて活用しましょう。

なお、SassをCSSにコンパイルするやり方については以下の記事で解説していますので、Sassのコンパイルのやり方がわからない場合は、こちらから環境構築を行なってください。

Sassのネストとは?

Sassネストとは、CSSのセレクタやルールを入れ子にして、親子関係にまとめて記述することです。

たとえば、次のようなCSSをSassのネストを使って書く場合は、SCSSでは以下のようにセレクタを入れ子にして記述することができます。

div {
  font-size: 16px;
}

div p {
  font-weight: bold;
}
div {
  font-size: 16px;

  p {
    font-weight: bold;
  }
}

これにより、HTMLの構造と同様に、スタイルシートの記述を階層化することができます。
ネストを使用することで、より読みやすく、保守しやすいスタイルシートを作成することができます。

子孫セレクタのネスト

ネストの基本である子孫セレクタのネストについて解説します。
たとえば、以下のようなHTMLとそれに紐づいたCSSがあります。

<div class="parent">
  <div class="child">
    <p>子孫セレクタのネスト</p>
  </div>
</div>
.parent {
  font-size: 16px;
}

.parent .child {
  font-weight: bold;
}

.parent .child p {
  color: blue;
}

上記のCSSを、Sassのネストで記述する場合、以下のようにセレクタを入れ子にしてスタイルを記述することができます。
Sassでは、親要素と子孫要素の関係をネスト構造で表現することができます。

.parent {
  font-size: 16px;

  .child {
    font-weight: bold;

    p {
      color: blue;
    }
  }
}

このようにネストを使うことで、CSSの記述量を大幅に短縮し、作業の効率化とメンテナンス性の向上します。

&(アンパサンド)を使ったネスト

次に&(サンパサンド)を使ったネストの方法について解説します。

通常のネストでは、親セレクタと子セレクタは半角スペースが空いた状態でコンパイルされますが、&を使うことで、親セレクタと子セレクタを結合してコンパイルされます。

たとえば、以下のような:hoverなどの擬似クラスや擬似要素を使用するHTMLとCSSがある場合、&のネストを使用します。

<a class="button" href="#">ボタン</a>
.button {
  display: block;
}

.button:hover {
  color: #bf4080;
}

&を使ったネストを行う場合は以下のように記載します。

.button {
  display: block;
  
  &:hover {
    color: #bf4080;
  }
}
  1. 疑似クラスの組み合わせ: &を使うことで、疑似クラスを親セレクタに組み合わせることができます。
  2. ネストの深さを減らす: 親セレクタを参照することで、ネストの深さを減らし、より読みやすいコードを記述することができます。
  3. 状態のスタイルの適用: &を活用することで、特定のセレクタに特定のクラスが追加されたときにスタイルを変更するなどが可能です。

BEM記法のネスト

Sassのネストを使ってBEM記法を実装する方法について解説します。

BEM記法とは

BEM記法は、コンポーネント指向のCSS設計手法の一つであり、Web制作で広く使用されています。
BEM記法の特徴は、.block__element--modifierという以下の3つの要素から構成された、厳格なクラスの命名規則にあります。

  • Block(ブロック): コンポーネントの基本となる要素
  • Element(エレメント): ブロック内の部品や要素
  • Modifier(モディファイア): 要素やブロックの状態やバリエーションを表す

BEM記法には大きなメリットがありますが、クラス名が長くなってしまうというデメリットがあります。
しかし、そのデメリットもSassのネストを活用することで補うことができます。

※BEM記法の解説は長くなるため詳しくは解説しませんが、理解を深めたい方は以下の記事から確認してください。

BEM記法をSassで書く

それでは、Sassのネストを使ったBEM記法の記述方法について解説します。
例えば、次のようなBEM記法を使用したHTMLとCSSがあるとします。

 <ul class="list">
  <li class="list__item">アイテム</li>
  <li class="list__item list__item--active">アイテム</li>
 </ul>
.list {
  background-color: #ccc;
}

.list__item {
  font-size: 20px;
}

.list__item--active {
  color: #bf4080;
}

上記のBEMを使って作成されたスタイルを、Sassで書く場合は&(アンパサンド)を使用して、次のようにBEM記法をネストして記述します。

.list {
  background-color: #ccc;

  &__item {
    font-size: 20px;
    
    &--active {
      color: #bf4080;
    }
  }
}

このようにSassを使うと、BEM記法のメリットを保ちながら、クラス名の長さを抑え、保守性の高いCSSを作成することができます。

  1. セレクタの親子関係を保持: &を使うことで、BEM記法でのセレクタの親子関係を保持しながら、効率的にスタイルを記述することができます。
  2. 可読性と保守性の向上: BEM記法のネストを使うことで、スタイルシートの可読性が向上し、保守性が高まります。要素の関係が直感的に理解しやすくなります。

メディアクエリのネスト

Sassのネストを使うと、メディアクエリを親セレクタとしてネストすることができます。
メディアクエリをネストして記述することで、セレクタごとに全てのスタイルを管理することができるようになり、コードの簡潔さ、保守性、可読性、効率性を向上させるのに役立ちます。

例えば以下のCSSをSassでメディアクエリをネストする場合は、メディアクエリを対象のスタイルルールの中に直接ネストすることができます。

.container {
  width: 100%;
}
@media (min-width: 768px) {
  .container {
    width: 80%;
  }
}
.container {
  width: 100%;

  @media (min-width: 768px) {
    width: 80%;
  }
}

これにより、特定の画面幅やデバイスに対するスタイルが一目で理解でき、コードがより簡潔で読みやすくなります。

  1. 可読性の向上: メディアクエリとそのスタイルが近くに記述されるため、コードの可読性が向上します。
  2. 保守性の向上: 特定の画面サイズに対するスタイルが一箇所に集約されるため、保守性が向上します。
  3. 効率的な記述: メディアクエリを親セレクタとしてネストすることで、CSSの記述がより効率的になります。

まとめ

以上でSassのネストの基本から応用までを解説しました。

Sassのネストを活用することで、スタイルシートの記述を効率化し、保守性を向上させることができます。
是非ネストを活用して効率的な開発を行いましょう。

おすすめの書籍