Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
87 lines (40 sloc) 3.71 KB
layout: "post"
title: "Parent Reference"
date: 2014-06-20
description: "Add magic to your selectors and reduce repetition with the parent reference - <code>&amp;</code>, useful for BEM fans"
So you've discovered that preprocessors support nesting stuff, you use it here and there and after a while you want to be able to do more than setting a child selector.
Well, you can.
It's called a parent reference - `&`, and it allows you to do some pretty cool stuff.
## Selector append
With the parent reference, you can easily attach a [pseudo class]( to the selector:
<%- @code('Parent Reference', 'append') %>
You can also add [class](, [id](, and [attribute]( selectors in this way.
## Extend the name of the selector
If you need to extend the name of a selector you can do it in the same way as above:
<%- @code('Parent Reference', 'extend name') %>
This allows for BEM-like names in your CSS. You can read more about this technique from these articles:
* [Even Easier BEM-ing with Sass 3.3](
* [Support for BEM modules in Sass 3.3](
* [Sass BEM-Selector Support and Trailing Ampersand](
## Parent selector
We can also have a trailing ampersand - when we put it after...
By having a trailing parent reference, you can add a parent selector:
<%- @code('Parent Reference', 'parent') %>
This can be used to target browsers if we use the classic ie targeting solution [as described by Paul Irish](
Another case where the parent selector can be useful is for parent element states where the children get specific classes.
## Selector prepend
Appending selectors might work when you are appending a class, id, or attribute selector, but what if we need to add a html element like `ol` to `.test`? With selector appending we will end up with `.testol` which is not what we want. For cases like this we need to prepend the selector.
<%- @code('Parent Reference', 'prepend') %>
## Multiple parent references
Need something weirder with a repeating class in the selector for example? No problem, just use several ampersands and chain the appropriately:
<%- @code('Parent Reference', 'multiple') %>
## Combinatorial explosion
The idea for combinatorial explosion [comes from Less]( and it can be useful for covering many combinations of selectors. Simulating it in Sass and Stylus is also possible.
<%- @code('Parent Reference', 'explosion') %>
This technique might be useful not only for adding space between elements that are direct siblings (the `+` selector), but also for covering direct descendants (the `>` selector).
## Root directive
The root directive/reference will move anything below it to the root level - therefore it will not inherit the selector it's nested under.
One use case inspired by the [excellent Stu Robson]( is positioning an animation declaration only where it's used. If we also put the animation name in a variable we end up with code that is orderly and less prone to errors.
<%- @code('Parent Reference', 'root') %>