LearnHow to Use the Double Ampersand Selector in Sass

   
Avatar

Guil Hernandez
writes on December 21, 2022

The Sass ampersand (&) symbol is used to reference the parent selector in a nested rule. For example, the following targets .btn on :hover:

.btn {
  ...
  &:hover {
    background: dodgerblue;
  }
}

We can also place the & after a selector to reverse the nesting order:

.btn {
  ...
  .navbar & {
    background: lightsteelblue;
  }
}

This outputs a descendant selector that targets a .btn element inside .navbar:

.btn {
  ...
}
.navbar .btn {
  background: lightsteelblue;
}

We can take this concept a step further with an adjacent sibling combinator.

The Sass Ampersand & the Adjacent Sibling Selector

The adjacent sibling combinator (+) is used to target an element’s immediate sibling. For instance:

.heading + .intro {
  ...
}

This targets any intro class immediately following an element with the class heading. Let’s take a look at two useful ways we can use this combinator with the & selector.

Adjacent Buttons

Let’s say we have a button group consisting of a primary and a secondary action button. Both have the class btn.

<div class="btn-group">
  <a class="btn" href="#">Primary Action</a>
  <a class="btn" href="#">Secondary Action</a>
</div>

The secondary action button needs to be a different color and have a left margin to separate it from its sibling. We can use the following rule to reference btn, then target its immediate sibling with the same class:

.btn {
  ...
  & + & {
    margin-left: 15px;
    background: firebrick;
  }
}

If two btn classes are adjacent siblings, the second one will get the firebrick background and left margin. Here’s the CSS output:

.btn {
  ...
}
.btn + .btn {
  margin-left: 15px;
  background: firebrick;
}

See CodePen Demo

Columns

The adjacent & selector also helps with column layout. To create a row where all but the first column have a left margin (or gutter), we can write the following:

.col {
  ...
  & + & {
    margin-left: 30px;
  }
}

The first column will remain flush with the left side of the page, while the others get a roomy left margin.

See CodePen Demo

As we just learned, the “double Sass ampersand” sibling selector is a handy solution that keeps us from writing extra CSS and classes in our markup. Methods like these are some of the many ways Sass helps us write cleaner, more efficient front-end code.

Learn More About the Sass Ampersand & Other Sass Basics with Treehouse

Treehouse offers a wide range of courses and Techdegrees that you can use to improve your Sass skills. Learn more about using the Sass ampersand and other Sass basics by signing up for a free trial of Treehouse today!

GET STARTED NOW

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

9 Responses to “How to Use the Double Ampersand Selector in Sass”

  1. Mário Silva on March 28, 2017 at 9:44 am said:

    Hello,
    Did any of you guys ever tried to use the following code:

    SOURCE
    ´´´
    .bananas,
    .kiwis {
    prop: props;
    @at-root .strawberry#{&} {
    prop: strawberry;
    }
    }
    ´´´

    OUTPUT
    ´´´
    .bananas,
    .kiwis {
    prop: props;
    }
    .strawberry.bananas,
    .kiwis {
    prop: strawberry;
    }
    ´´´

    I cant manage to join strawberry to kiwis.

  2. This is awesome, I just found it and you have saved me some extra work already! love it!

  3. Awesome articles you posted here i am so inspired here keep it continue.
    Thanks

  4. I am becoming very fond of Treehouse articles. Love staying up to date on the modern web technology! 🙂

  5. Sass 3.3 is coming, all this stuff will be even more awesome! 😀

    https://gist.github.com/luzlol/7940531

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop