Using the & (Ampersand) in Sass

What the heck is the & in Sass?  It’s a way to super power your Sassy self when writing Sass!

Just think of it like this:

& is a variable representing the parent selector.

So this Sass:

.parent {
  .child {} 
}

Equals this CSS:

.parent .child {}

And this Sass:

.parent {
  &.child { }
}

Equals this CSS:

.parent.child {}

and this Sass:

.parent {
  & .child { }
}

Equals this CSS:

.parent .child {}

Get it?  It’s like a variable for a parent selector!