Skip to content

Implement selector functions #963

Closed
Closed
@xzyfer

Description

@xzyfer

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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions