Sass: Selector Functions
The selector functions allow you to manipulate the CSS selectors in a stylesheet. All of the functions, except selector-nest(), prohibit the use of the parent selector &.
Sass Selector Functions
The following table lists all map functions in Sass:
| Function | Description | Example | Result |
|---|---|---|---|
selector-nest($selectors) | Returns a new selector containing a nested list of CSS selectors based on the list provided. | selector-nest(p, h1, ".foo") | "p" "h1" .foo" |
selector-append($selectors..) | Returns a new selector with the second and subsequent selectors appended to the first without spaces | selector-append(p, ".foo") | "p.foo" |
selector-replace($selector, $original, $replacement) | Returns a new selector with the selector(s) specified in $replacement in place of selector(s) specified in $original | selector-replace("p .italics", ".italics", ".bold") | "p" "bold" |
is-superselector($super, $sub) | Returns a Boolean value indicating whether the selector specified in $super matches all the elements specified in $sub | is-superselector("p", "p.b") | true |
is-superselector("p", "p .b") | false | ||
simple-selectors($selector) | Returns a list of the individual selectors contained in $selector, which must be a compound selector | simple-selector("p.b") | ("p", "b") |
selector-parse($selector) | Returns a list of strings contained in $selector using the same format as the parent selector & | selector-parse("p .a .b .c") | ('p' '.a' '.b' '.c') |