The selector functions allow you to manipulate the CSS selectors in a stylesheet. All 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') |