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 &.
| Function | Description | Examples |
|---|---|---|
| selector-nest($selectors) | Returns a new selector containing a nested list of CSS selectors based on the list provided. | selector-nest(p, h1, ".foo")
Result: "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")
Result: "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")
Result: 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") Result: ("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") Result: ('p' '.a' '.b' '.c') |