Skip to content
Permalink
Browse files

Add a CHANGELOG entry about selector functions.

  • Loading branch information...
nex3 committed Jun 13, 2014
1 parent f031572 commit f701698fde7b4cf9617f4708f8b812918e1ee24d
Showing with 63 additions and 6 deletions.
  1. +57 −0 doc-src/SASS_CHANGELOG.md
  2. +6 −6 lib/sass/script/functions.rb
@@ -39,6 +39,63 @@ can use it in a mixin to detect whether a parent selector exists:
}
}

### Selector Functions

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 {Sass::Script::Functions#selector_nest `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 {Sass::Script::Functions#selector_append `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 {Sass::Script::Functions#selector_extend `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 {Sass::Script::Functions#selector_replace `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 {Sass::Script::Functions#selector_unify `selector-unify($selector1,
$selector2)` function} returns a selector that matches only elements matched
by both `$selector1` and `$selector2`.

* The {Sass::Script::Functions#is_superselector `is-superselector($super, $sub)`
function} returns whether or not `$super` matches a superset of the elements
`$sub` matches.

* The {Sass::Script::Functions#simple_selectors `simple-selectors($selector)`
function} takes only a selector with no commas or spaces (that is, a [compound
selector](http://dev.w3.org/csswg/selectors4/#structure)). It returns the list
of simple selectors that make up that compound selector.

* The {Sass::Script::Functions#selector_parse `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.

One of the most straightforward applications of selector functions and `&` is
adding multiple suffixes to the same parent selector. For example:

.list {
@at-root #{selector-append(&, "--big", &, "--active")} {
color: red;
}
}

### Smaller Improvements

* `@extend` can now extend selectors within selector pseudoclasses such as
@@ -223,9 +223,6 @@ module Sass::Script
# In general, selector functions allow placeholder selectors
# (`%foo`) but disallow parent-reference selectors (`&`).
#
# \{#selector_parse selector-parse($selector)}
# : Parses a selector into the format returned by `&`.
#
# \{#selector_nest selector-nest($selectors...)}
# : Nests selector beneath one another like they would be nested in the
# stylesheet.
@@ -243,13 +240,16 @@ module Sass::Script
# : Unifies two selectors to produce a selector that matches
# elements matched by both.
#
# \{#simple_selectors simple-selectors($selector)}
# : Returns the simple selectors that comprise a compound selector.
#
# \{#is_superselector is-superselector($super, $sub)}
# : Returns whether `$super` matches all the elements `$sub` does, and
# possibly more.
#
# \{#simple_selectors simple-selectors($selector)}
# : Returns the simple selectors that comprise a compound selector.
#
# \{#selector_parse selector-parse($selector)}
# : Parses a selector into the format returned by `&`.
#
# ## Introspection Functions
#
# \{#feature_exists feature-exists($feature)}

0 comments on commit f701698

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.