Sass Selector Functions

Sass Selector Functions

Selector functions are used to check and operate on selectors.

The following table lists all selector functions in Sass:

Function Description & example
is-superselector(super, sub)

Check super Whether the selector matches sub All elements matched.

Example:

is-superselector("div", "div.myInput")

Result: true

is-superselector("div.myInput", "div")

Result: false

is-superselector("div", "div")

Result: true
selector-append(selectors)

Attaches the second (and third/fourth, etc.) selector to the first selector.

Example:

selector-append("div", ".myInput")

Result: div.myInput

selector-append(".warning", "__a")

Result: .warning__a
selector-extend(selector, extendee, extender)
selector-nest(selectors)

Returns a new selector that contains a nested list of CSS selectors based on the provided list.

Example:

selector-nest("ul", "li")

Result: ul li

selector-nest(".warning", "alert", "div")

Result: .warning div, alert div
selector-parse(selector)

Returns a list of strings contained in the selector using the same format as the parent selector.

Example:

selector-parse("h1 .myInput .warning")

Result: ('h1' '.myInput' '.warning')
selector-replace(selector, original, replacement)

Returns a new selector, using replacement specified selector is replaced by original specified selector.

Example:

selector-replace("p.warning", "p", "div")

Result: div.warning
selector-unify(selector1, selector2)

Returns a new selector that only matches elements that selector1 and selector2 elements that match both.

Example:

selector-unify("myInput", ".disabled")

Result: myInput.disabled

selector-unify("p", "h1")

Result: null
simple-selectors(selectors)

Return selectors list of all selectors.

Example:

simple-selectors("div.myInput")

Result: div, .myInput

simple-selectors("div.myInput:before")

Result: div, .myInput, :before