2つのセレクターに一致するセレクターに継承
2つのセレクターに一致するセレクターに継承するには、selector-unify
関数を使用します。
構文
selector-unify(1つ目のセレクター, 2つ目のセレクター)
一致する要素が見つかった場合は、その要素は継承されます。
どちらかのセクターに要素名がない場合は最後の子孫セレクターに継承されます。
どの要素も一致しない場合はnull
を返します。
- ※ nullは直接出力できずコンパイル時にエラーになります。
サンプルコード
SCSS
#{selector-un if y( "a.foo" , ".bar" )} { color : #d00 ; } #{selector-un if y( "a.foo" , "a.baz" )} { color : #d00 ; } #{selector-un if y( "a.foo .bar" , ".baz" )} { color : #d00 ; } #{selector-un if y( "a.foo .bar" , "a.baz" )} { color : #d00 ; } #{selector-un if y( "a.foo .bar" , ".bar.baz" )} { color : #d00 ; } // 次の2つはエラーになる #{selector-un if y( "a.foo" , "b.bar" )} { color : #d00 ; } #{selector-un if y( "a" , "b" )} { color : #d00 ; } |
コンパイル後:CSS
a.foo.bar { color : #d00 ; } a.foo.baz { color : #d00 ; } a.foo .bar.baz { color : #d00 ; } a.foo a.bar.baz { color : #d00 ; } a.foo .bar.baz { color : #d00 ; } |