Selector functions in Sass are employed for inspecting and modifying selectors.
Below is a comprehensive table enumerating all selector functions available in Sass:
| Function | Description | Examples |
|---|---|---|
| selector-nest($selectors) | Generates a new selector comprising a nested list of CSS selectors derived from the provided list. | selector-nest(p, h1, “.foo”) Result: “p” “h1″ .foo” |
| selector-append($selectors..) | Produces a new selector where the second and subsequent selectors are added to the first without any spaces in between. | selector-append(p, “.foo”) “p.foo” |
| selector-replace($selector, $original, $replacement) | Produces a new selector where the selector(s) specified in $replacement replace the selector(s) specified in $original. | selector-replace(“p .italics”, “.italics”, “.bold”) Result: “p” “bold” |
| is-superselector($super, $sub) | Indicates with a Boolean value whether the selector specified in $super matches all the elements specified in $sub. | is-superselector(“p”, “p.b”) Result: true |
| is-superselector(“p”, “p .b”) | false | |
| simple-selectors($selector) | Produces a list containing the individual selectors within $selector, which must be a compound selector. | simple-selector(“p.b”) Result: (“p”, “b”) |
| selector-parse($selector) | Produces a list of strings extracted from $selector, formatted similarly to the parent selector &. | selector-parse(“p .a .b .c”) Result: (‘p’ ‘.a’ ‘.b’ ‘.c’) |
