Closed
Description
Ruby Sass 3.4 introduced a bunch of selector functions. With #548 pretty much done we're in a good spot to tackle this.
Complementing the ability to use
&
in SassScript, there’s a new suite of functions that use Sass’s powerful@extend
infrastructure to allow users to manipulate selectors. These functions take selectors in the fully-parsed format returned by&
, plain strings, or anything in between. Those that return selectors return them in the same format as&
.
- The selector-nest($selectors...) function nests each selector within one another just like they would be nested in the stylesheet if you wrote them separated by spaces. For example,
selector-nest(".foo, .bar", ".baz") returns .foo .baz, .bar .baz (well, technically (("foo" ".baz") (".bar" ".baz")))
.- The selector-append($selectors...) function concatenates each selector without a space. It handles selectors with commas gracefully, so it’s safer than just concatenating the selectors using
#{}
. For example,selector-append(".foo, .bar", "-suffix")
returns.foo-suffix, .bar-suffix
.- The selector-extend($selector, $extendee, $extender) function works just like
@extend
. It adds new selectors to$selector
as though you’d written$extender { @extend $extendee; }
.- The selector-replace($selector, $original, $replacement) function replaces all instances of
$original
in $selector with$replacement
. It uses the same logic as@extend
, so you can replace complex selectors with confidence.- The selector-unify($selector1, $selector2) function returns a selector that matches only elements matched by both
$selector1
and$selector2
.- The is-superselector($super, $sub) function returns whether or not $super matches a superset of the elements
$sub
matches.- The simple-selectors($selector) function takes only a selector with no commas or spaces (that is, a compound selector). It returns the list of simple selectors that make up that compound selector.
- The selector-parse($selector) function takes a selector in any format accepted by selector functions and returns it in the same format returned by
&
. It’s useful for getting a selector into a consistent format before manually manipulating its contents.
Source http://sass-lang.com/documentation/file.SASS_CHANGELOG.html#selector_functions