MENU


Selector

selector-nest($selectors…) Nests selector beneath one another like they would be nested in the stylesheet.
selector-append($selectors…) Appends selectors to one another without spaces in between.
selector-extend($selector, $extendee, $extender) Extends $extendee with $extender within $selector.
selector-replace($selector, $original, $replacement) Replaces $original with $replacement within $selector.
selector-unify($selector1, $selector2) Unifies two selectors to produce a selector that matches elements matched by both.
is-superselector($super, $sub) Returns whether $super matches all the elements $sub does, and possibly more.
simple-selectors($selector) Returns the simple selectors that comprise a compound selector.
selector-parse($selector) Parses a selector into the format returned by &.
Selector functions can take a plain string, a list of lists as returned by & or anything in between.
#{selector-nest('.a, .b','.c')}  { color: green; }
#{selector-append('.a, .b','.c')}  { color: green; }
#{selector-extend('.a .b .c','.b','.d')}  { color: green; }
#{selector-replace('.a .b .c','.b','.d')}  { color: green; }
#{selector-unify('.a, .b, .c','.b, .c, .d')}  { color: green; }
#{simple-selectors('.a.b.c')}  { color: green; }

.a .c, .b .c {
  color: green;
}

.a.c, .b.c {
  color: green;
}

.a .b .c, .a .d .c {
  color: green;
}

.a .d .c {
  color: green;
}

.a.b, .a.c, .a.d, .b, .b.c, .b.d, .c.b, .c, .c.d {
  color: green;
}

.a, .b, .c {
  color: green;
}