Sass Selector Functions
Sass selector functions are used to inspect and manipulate selectors.
The following table lists Sass's selector functions:
| Function | Description & Example |
|---|---|
| is-superselector(super, sub) | Compares the scope of two selectors, determining if the super selector includes the scope matched by the sub selector. Returns true if it does, otherwise false. <br> <br> Example: <br>is-superselector("div", "div.myInput") <br>Result: true <br>is-superselector("div.myInput", "div") <br>Result: false <br>is-superselector("div", "div") <br>Result: true |
| selector-append(selectors) | Appends the second (or more) selector to the first. <br> <br> Example: <br>selector-append("div", ".myInput") <br>Result: div.myInput <br>selector-append(".warning", "__a") <br>Result: .warning__a |
| selector-extend(selector, extendee, extender) | |
| selector-nest(selectors) | Returns a new selector, which is a nested list generated from the provided list of selectors. <br> <br> Example: <br>selector-nest("ul", "li") <br>Result: ul li <br>selector-nest(".warning", "alert", "div") <br>Result: .warning div, alert div |
| selector-parse(selector) | Converts the string selector into a selector queue. <br> <br> Example: <br>selector-parse("h1 .myInput .warning") <br>Result: ('h1' '.myInput' '.warning') |
| selector-replace(selector, original, replacement) | Given a selector, returns a new selector queue with the original replaced by the replacement. <br> <br> Example: <br>selector-replace("p.warning", "p", "div") <br>Result: div.warning |
| selector-unify(selector1, selector2) | Combines two selectors into a compound selector. Returns null if the selectors cannot be combined. <br> <br> Example: <br>selector-unify("myInput", ".disabled") <br>Result: myInput.disabled <br>selector-unify("p", "h1") <br>Result: null |
| simple-selectors(selectors) | Splits a compound selector into individual selectors. <br> <br> Example: <br>simple-selectors("div.myInput") <br>Result: div, .myInput <br>simple-selectors("div.myInput:before") <br>Result: div, .myInput, :before |