Sassy Ampersands Are… Beefy

Sassy &s

If you’ve ever used Sass, you probably already know and love the ampersand(&). Nesting a little ampersand(&) inside a rule set let’s you reference the parent or current selector. You can then follow or preceed that ampersand(&) with classes, ids, elements, psuedo-elemements, and even more ampersands(&).

Probably the first Sassy thing I learned was using the ampersand(&) to speed up writing styles for pseudo-elements. That means that you can write things like this:

    button {
      background: #F00;
      &:hover {
        background: #000;
      }
    }

And the CSS output would look like this:

    button {
      background: #F00;
    }
    button:hover {
      background: #000;
    }

Pretty simple, instead of repeating your selector with each new situation you come across, you can DRY up your styles while making them easier to read, faster to write, and it just looks nicer.

But the ampersand(&) is beefier than just that. It can handle situations like reverse nesting, extending class and id names, and even adjacent sibling selection.

Going Backwards

Reverse nesting is great for that situation where you need to make a tiny change to an element based on its container. Instead of breaking up your styles or creating yet another class, you can ampersand(&) that container right into your element’s rule set.

Note that I emphasized ‘tiny change’ above. If you find yourself writing a completely new style based on the container, it’s time for a new class or id. Here’s a real-life example of the tiny change I’m talking about.

Play with this gist on SassMeister.

Extending class and id names

This value of this particular feature is pretty heavily debated, but let’s look at the markup first.

Disclaimer: For the sake of simplicity, I’m using color names, obviously this would be horrible way to name your classes.

Play with this gist on SassMeister.

I, personally, like the idea of putting one descriptive class on a button vs. 3 or 4 classes that, when combined, give you the style you need. This is also helpful if you like to write BEMy class and id names. The down side of extending class and id names (beyond ending up with a giant mess if you’re not careful with your nesting) is searchability(?). Since most of my work is done with a team, and not on my own, it’s important for everyone to be able to locate styles. When class and id names are extended in this way, new names get created, but never written outright. This means that you won’t find ‘.button–yellow’ when searching your Sass, because it only exists in the compiled CSS.

Something to note: It’s easy in this nested style situation to assume that an extended class/id would inherit the styles from the base class/id. This is not the case. Since you’re creating an entirely new class/id name, you have to @extend your base styles.

Double Ampersands

Nested adjacent sibling selection is a bit of a weirdo, but I can still think of a few cases where this would be helpful. Similar to reverse nesting, this is one of those cases where, most of the time, it’s going to be better to create a new class. But let’s look at a simple buttony situation where it would be OK to use the double ampersand(&).

Play with this gist on SassMeister.

I could also see this being helpful with forms. Think input styles that are preceeded by a label vs. inputs directly next to one another. Previously I would’ve handled those situations by adding a class or wrapping them in a container, but double ampersands lets you target that specific situation.

As with pretty much anything Sass related, with great knowledge comes great responsibility. Don’t get too crazy with the ampersand(&) just because you can. Or maybe do get crazy, SassMeister is a great tool for playing around with features that don’t have a place in your current workflow. Sync it up with your github account and save some of the craziness until to find the right time to use it.