Sass セレクタ関数

Sass 関数

Sass セレクタ関数は、セレクタの確認と操作に使用します。

次の表に、Sassのセレクタ関数を示します:

関数 説明 & 例
is-superselector(super, sub) 2つのセレクタの一致範囲を比較し、つまりsuperセレクタがsubもう一方のセレクタの一致範囲を含むかどうかを判断します。含む場合は true を返し、それ以外の場合は false を返します。

例:
is-superselector("div", "div.myInput")
結果: true
is-superselector("div.myInput", "div")
結果: false
is-superselector("div", "div")
結果: true
selector-append(selectors) 2番目(複数も可)を最初のセレクタの後ろに追加します。 selector.

例:
selector-append("div", ".myInput")
結果: div.myInput
selector-append(".warning", "__a")
結果: .warning__a
selector-extend(selector, extendee, extender)  
selector-nest(selectors) 提供されたセレクタリストからネストしたリストを生成する新しいセレクタを返します。

例:
selector-nest("ul", "li")
結果: ul li
selector-nest(".warning", "alert", "div")
結果: .warning div, alert div
selector-parse(selector) 文字列のセレクタをselectorセレクタリストに変換します。

例:
selector-parse("h1 .myInput .warning")
結果: ('h1' '.myInput' '.warning')
selector-replace(selector, original, replacement) セレクタを指定し、original を replacement で置き換えた後、新しいセレクタリストを返します。

例:
selector-replace("p.warning", "p", "div")
結果: div.warning
selector-unify(selector1, selector2) 2つのセレクタを合成して1つの複合セレクタにします。2つのセレクタを合成できない場合は、null 値を返します。

例:
selector-unify("myInput", ".disabled")
結果: myInput.disabled
selector-unify("p", "h1")
結果: null
simple-selectors(selectors) 複合セレクタを個々のセレクタに分割します。

例:
simple-selectors("div.myInput")
結果: div, .myInput
simple-selectors("div.myInput:before")
結果: div, .myInput, :before

Sass 関数

その他の拡張