2つのセレクターに一致するセレクターに継承

2つのセレクターに一致するセレクターに継承するには、selector-unify関数を使用します。

構文

							selector-unify(1つ目のセレクター, 2つ目のセレクター)

一致する要素が見つかった場合は、その要素は継承されます。
どちらかのセクターに要素名がない場合は最後の子孫セレクターに継承されます。
どの要素も一致しない場合はnullを返します。

※ nullは直接出力できずコンパイル時にエラーになります。

サンプルコード

SCSS

#{selector-unify("a.foo", ".bar")} {
    color:#d00;
}
 
#{selector-unify("a.foo", "a.baz")} {
    color:#d00;
}
 
#{selector-unify("a.foo .bar", ".baz")} {
    color:#d00;
}
 
#{selector-unify("a.foo .bar", "a.baz")} {
    color:#d00;
}
 
#{selector-unify("a.foo .bar", ".bar.baz")} {
    color:#d00;
}
 
// 次の2つはエラーになる
#{selector-unify("a.foo", "b.bar")} {
    color:#d00;
}
 
#{selector-unify("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;
}

SASS・SCSS逆引きリファレンス一覧へ戻る