freelance-engineerの日記

勉強ログなど。何度も同じことをググってしまう自分の備忘録です。調べたらとりあえずまとめて記事にする、という方針。

Sassで親セレクタのクラス名を含めた要素を選択する

Sassでは、親要素に指定された複数のクラス名のうち、特定のクラス名を持つ要素を選択するために、セレクタの複合クラスを使用します。

例えば、class属性が "a b" となっている要素に対して、"a"クラスの中で"b"クラスを選択する場合、以下のように書くことができます。

.a {
  /* aクラスのスタイル */
  &.b {
    /* aクラスかつbクラスを持つ要素のスタイル */
  }
}

上記のSassコードでは、"&"を使用して親要素を参照し、"."を使用してクラス名を指定しています。"&.b"と書くことで、親要素が"a"クラスかつ"b"クラスを持つ要素を選択することができます。

例えば、以下のHTMLコードがある場合:

<div class="a b">...</div>

上記のSassコードを適用すると、"a"クラスのスタイルが全ての要素に適用され、"a"クラスかつ"b"クラスを持つ要素には、"a.b"セレクタのスタイルが適用されます。

.a {
  /* aクラスのスタイル */
}
.a.b {
  /* aクラスかつbクラスを持つ要素のスタイル */
}

上記のCSSコードが生成されます。