Sass Selector Functions
Sass FunctionsSass 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 matching range of two selectors, i.e., determinessuperwhether the selector containssubthe range matched by the selector; if yes, returns true, otherwise returns false. Example: is-superselector("div", "div.myInput") Result: true is-superselector("div.myInput", "div") Result: false is-superselector("div", "div") Result: true |
| selector-append(selectors) | Appends the second (or multiple) to the end of the first selector.
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 generates a nested list from the provided list of selectors. Example: selector-nest("ul", "li") Result: ul li selector-nest(".warning", "alert", "div") Result: .warning div, alert div |
| selector-parse(selector) | Converts a string selectorselectorinto a selector list. Example: selector-parse("h1 .myInput .warning") Result: ('h1' '.myInput' '.warning') |
| selector-replace(selector, original, replacement) | Given a selector, returns a new selector list after replacing original with replacement. Example: selector-replace("p.warning", "p", "div") Result: div.warning |
| selector-unify(selector1, selector2) | Combines two selectors into a compound selector. If the two selectors cannot be combined, returns null. Example: selector-unify("myInput", ".disabled") Result: myInput.disabled selector-unify("p", "h1") Result: null |
| simple-selectors(selectors) | Splits a compound selector into simple selectors. Example: simple-selectors("div.myInput") Result: div, .myInput simple-selectors("div.myInput:before") Result: div, .myInput, :before |
Other Extensions