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.

Author: Lorraine