Referencing parent selectors by using the ampersand (&) can be a powerful tool, if used right. There are simple uses of this feature as well as some very complex uses of this feature. In this post we will cover the basic uses of the ampersand (&) as well as link you to a post by Joel Oliveira that goes much deeper on the subject.
Intro to the ampersand (&) character
If you’ve been using Sass for any length of time, then you’re likely to be familiar with being able to reference parent selectors using the ampersand (&) character.
A simple Sass example looks like this:
h3 font-size: 20px margin-bottom: 10px &.some-selector font-size: 24px margin-bottom: 20px
And here’s how the output CSS looks.
h3 { font-size: 20px; margin-bottom: 10px; } h3.some-selector { font-size: 24px; margin-bottom: 20px; }
Pretty neat huh, how we didn’t have to write out the h3 again. With Sass all we have to do is nest the next ruleset and attach the &
in place of the repeating selector and we’re golden.
Wait. There’s more.
This is something I stumbled onto today while working with some Sass written by my bud, and fellow staff writer, Wynn Netherland. Though, I don’t see this mentioned in the Sass documentation. You do read documentation, don’t you?
So, what if I wanted to style all my h3
headings a certain way, but for this one h3
, that is also a child of a certain selector, I want to style it slightly different than the others? Well, with CSS we know how that goes, we’d have to write it all out. Verbose. Bah …
But with Sass … what options do we have? Check this out …
h3 font-size: 20px margin-bottom: 10px .some-parent-selector & font-size: 24px margin-bottom: 20px
And here’s how the output CSS looks.
h3 { font-size: 20px; margin-bottom: 10px; } .some-parent-selector h3 { font-size: 24px; margin-bottom: 20px; }
Based on this code, you can place a trailing ampersand (&) character at the end of your selector declaration in place of the repeating selector, and sit back and enjoy the awesomeness of Sass.
Link to a more advanced usage example
My example, is very simplistic but Joel Oliveira goes deeper on the subject with his post, The ampersand & a killer Sass feature. We highly recommend it.