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コードが生成されます。
