Comments on: The Sass Ampersand

By: Rajkumar

Rajkumar — Fri, 22 Jan 2016 02:09:29 +0000

Thanks for posting Great article. I use the below code for my sites.
.parent {
.child {
.grand-child & {
&.sibling { }
}
}
}

By: Maxime

Maxime — Tue, 19 Jan 2016 22:46:22 +0000

One of my favorite :

.a, .b {
  & + & {
    border-top: 1px solid black;
  }
}

generates :

.a + .a, .a + .b, .b + .a, .b + .b {
  border-top: 1px solid black;
}

Now, imagine with 3 selectors, or more.

By: Chris Coyier

Chris Coyier — Tue, 19 Jan 2016 20:36:20 +0000

In reply to DigitalTB.

I dunno…. I don’t think that’s correct. Here’s a live example on Sassmeister so you can see them side-by-side.

http://www.sassmeister.com/gist/7759547dc592fd129877

By: DigitalTB

DigitalTB — Tue, 19 Jan 2016 18:13:53 +0000

First, the article was awesome and provided good insight. I took a look at your "Ah ha" moment section and became a little confused. Your 2 SCSS examples will NOT compile to the same thing because of Sass nesting rules. SASS

.parent {
  & .child {}
}

compiles to: CSS

.parent.child {}

NOT

.parent .child {}

notice the space after the .parent class the difference being the & says if the element has this parent class AND this child class, the child class styles gets added (or subtracted) to the parent class. The other way means that an element with the class of child lives inside the element with the class of parent. Here is a link to a Pen that takes your original example and explores 3 ways the nested Sass will compile.

By: Edrees

Edrees — Thu, 14 Jan 2016 08:02:35 +0000

Nice and really useful. Thanks!

By: Kev

Kev — Wed, 13 Jan 2016 22:29:45 +0000

Nice post. I love using it with BEM. Saves a lot of repetitive typing.

.nav {
  &__list {}
  &__item {}
  &__link {}
}

By: Jesse

Jesse — Wed, 13 Jan 2016 19:33:38 +0000

In reply to Adam. Me either, that's pretty nice. I love nesting because it allows me to fold/collapse code, but sometimes the selectors do become far too large.

By: caiman

caiman — Wed, 13 Jan 2016 19:04:38 +0000

My favorite use case for the ampersand is for adding modernizr parent classes.

.my-class{
     .no-flexbox & {}
}

Works beautifully.

By: Rachel Reveley

Rachel Reveley — Wed, 13 Jan 2016 15:28:02 +0000

In reply to Gary. I use to be cautious about that too though sourcemaps have eliminated any problems I used to have with half selectors

By: Rachel Reveley

Rachel Reveley — Wed, 13 Jan 2016 15:26:02 +0000

A nice round up I wish I’d had this a few years ago. SOmething I have enforced in our stylesheets at work is that every nested rule has to have an & whether it needs it or not. It might sound a little odd but it makes the Less easier to read, when you see a rule with an ampersand at the beginning, you can expect it to have one within the other selectors without spending time looking. You can also see that a rule belongs within a parent, though our other standard is that nearly all rules are within mixins thus preventing orphans.

By: Johan

Johan — Wed, 13 Jan 2016 08:53:12 +0000

I didn’t know about the:
.button {
body.page-about & { }
}

That is really great for organisational purposes. Super!

By: Martin

Martin — Wed, 13 Jan 2016 08:22:16 +0000

Nice post. Usefull stuff..

By: Gary

Gary — Wed, 13 Jan 2016 06:48:56 +0000

I didn't think I had anything to learn about &, but the &-primary trick is pretty nifty. I'd probably caution against overusing the & though. the .parent { &#{&} {} } seems gratuitious when .parent { &.parent {} }is both clearer to understand and easier to type.

By: Ben

Ben — Wed, 13 Jan 2016 03:19:22 +0000

Awesome I didn't know about this one:

.button {
  body.page-about & { }
}

Very useful. I always assumed the ampersand had to come at the beginning of the selector.

By: Harlan

Harlan — Tue, 12 Jan 2016 23:25:39 +0000

There’s a lot of power in the Sass &, it’s great to see so much of it described here.

That said, nested selectors in general (and nested selectors with & in particular) can be a huge pain, especially if your team doesn’t consist entirely of Sass experts. There’s a lot of appeal in using &, @at-root, and the rest to construct consistent selectors, but they are often difficult to read and modify. If I find myself writing something like .parent { &#{&} { property: value } }, that’s a strong reminder to evaluate what else I did horribly wrong.