Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement selector functions #963

Closed
xzyfer opened this issue Mar 18, 2015 · 6 comments
Closed

Implement selector functions #963

xzyfer opened this issue Mar 18, 2015 · 6 comments

Comments

@xzyfer
Copy link
Contributor

xzyfer commented Mar 18, 2015

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

@onedayitwillmake
Copy link

@xzyfer Added the accompanying test in pull request 281
sass/sass-spec#281

@xzyfer
Copy link
Contributor Author

xzyfer commented Mar 20, 2015

Great work @onedayitwillmake! I left some feedback

@onedayitwillmake
Copy link

I've started work on this - should I do a WIP progress pull request? or just hold off?

@mgreter
Copy link
Contributor

mgreter commented Mar 27, 2015

@onedayitwillmake sure, if you made some substantial progress, do a WIP PR!

@mgreter
Copy link
Contributor

mgreter commented Jun 13, 2015

I have the base work done by @onedayitwillmake included in my latest WIP branch!

@mgreter
Copy link
Contributor

mgreter commented Jul 13, 2015

We are now passing most spec tests since #1249 was merged 🎈

@mgreter mgreter closed this as completed Jul 13, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants