Permalink
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](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) to the selector:
<%- @code('Parent Reference', 'append') %>
You can also add [class](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors), [id](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors), and [attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) 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](http://www.alwaystwisted.com/post.php?s=2014-02-27-even-easier-bem-ing-with-sass-33)
* [Support for BEM modules in Sass 3.3](http://mikefowler.me/2013/10/17/support-for-bem-modules-sass-3.3/)
* [Sass BEM-Selector Support and Trailing Ampersand](http://jonsuh.com/blog/sass-bem-selector-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](http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/).
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](http://lesscss.org/features/#parent-selectors-feature-combinatorial-explosion) 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](http://www.alwaystwisted.com/articles/2014-03-08-using-sass-33s-at-root-for-piece-of-mind) 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') %>