The Sass Parent Selector (&)

What Does & Represent?

Inside a nested rule, & refers to the full selector of its enclosing rule. It lets you combine, extend, or reposition that selector without retyping it, which is essential for pseudo-classes, modifiers, and BEM-style naming.

.btn {
  &:hover {
    opacity: 0.9;
  }
}

Compiles to .btn:hover { opacity: 0.9; }, & is replaced directly with .btn, no space added.

Parent Selector Placement

&:pseudo-class  { ... }
&.additional-class { ... }
&__bem-element { ... }
&--bem-modifier { ... }
.ancestor & { ... }

• & immediately followed by a pseudo-class or extra class compiles with no space, producing a compound selector.
• & can be part of a larger string, common for BEM elements (&__title) and modifiers (&--active).
• & can appear on the right side of another selector to reference an ancestor context (.dark &).
• Multiple & symbols can appear in the same selector for advanced combinator patterns.

Parent Selector Cheatsheet

The most common ways & is used in real SCSS.

BEM Class Names With &

Combining & with string suffixes is the standard way to write BEM (Block Element Modifier) class names in Sass without repeating the block name for every element and modifier.

.card {
  padding: 1rem;

  &__title {
    font-weight: 700;
  }

  &__body {
    color: #475569;
  }

  &--highlighted {
    border-left: 4px solid #2563eb;
  }
}

Compiles to .card, .card__title, .card__body, and .card--highlighted, four flat, non-nested CSS rules.

Referencing Ancestor Context

& isn't limited to the left side of a compound selector. Placing it on the right of another selector lets a component adjust its own styles based on an ancestor context, like a dark-mode wrapper class.

.card {
  background: white;

  .dark-mode & {
    background: #1e293b;
    color: #f1f5f9;
  }
}

Compiles to .dark-mode .card { ... }, the component reacts to being inside .dark-mode anywhere above it.

Multiple Ampersands and Combinators

& can be combined with itself for patterns like styling adjacent siblings of the same component, useful for adding spacing between repeated items without a wrapping container.

.tag {
  & + & {
    margin-left: 0.5rem;
  }
}

Compiles to .tag + .tag { margin-left: 0.5rem; }, spacing between two tags placed next to each other.

Common Mistakes

• Adding a space between & and a suffix meant to be a compound selector, & .icon and &.icon compile to very different, unrelated selectors.
• Overusing BEM modifiers nested many levels deep instead of keeping the block/element/modifier structure flat.
• Forgetting that & inside a comma-separated selector list refers to the entire compound selector, not just one part of it.
• Using & for unrelated selector patterns where a plain, explicit selector would be clearer to read.

Key Takeaways

• & represents the enclosing selector and can be combined with pseudo-classes, extra classes, or string suffixes.
• BEM elements and modifiers are commonly written as &__element and &--modifier.
• & can also appear on the right of another selector to reference ancestor context, like a dark-mode wrapper.
• & + & is a useful pattern for spacing between repeated sibling components.