Sass Parent Selector — The & Reference

In this tutorial, you will learn about Sass Parent Selector. We cover key concepts, practical examples, and best practices to help you master this topic.

The Sass parent selector & references the current parent selector, enabling pseudo-classes (hover, focus), compound selectors (adjacent, child), and BEM-style naming.

What You'll Learn

You will learn advanced & selector patterns including pseudo-class concatenation, parent reference in nested contexts, adding classes, and using & with selectors.

Why It Matters

The & selector is essential for maintainable nested styles. DodaTech uses & for hover states, active states, and modifier classes across all components.

Real-World Use

Durga Antivirus Pro uses & to generate modifier classes like .button--danger and .button--large from within the .button declaration block.

flowchart LR
    A[Nesting] --> B[Parent Selector]
    B --> C[Pseudo-classes]
    B --> D[Modifier Classes]
    B --> E[BEM Pattern]
    B --> F[Selectors]
    style B fill:#c69,stroke:#c69,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Basic Parent Reference

.button {
  background: #7c3aed;

  &:hover {
    background: #6d28d9;
  }

  &:focus {
    outline: 2px solid #a78bfa;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

Compiles to:

.button { background: #7c3aed; }
.button:hover { background: #6d28d9; }
.button:focus { outline: 2px solid #a78bfa; }
.button:disabled { opacity: 0.5; cursor: not-allowed; }

Expected output: The & concatenates directly with pseudo-classes to style different states.

Adding Classes

.card {
  background: white;
  border: 1px solid #ddd;

  &.featured {
    border-color: gold;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  &.compact {
    padding: 0.5rem;
    font-size: 0.875rem;
  }
}

Compiles to:

.card { background: white; border: 1px solid #ddd; }
.card.featured { border-color: gold; box-shadow: ...; }
.card.compact { padding: 0.5rem; font-size: 0.875rem; }

Expected output: The & combines with class selectors to create compound selectors.

BEM with Parent Selector

.accordion {
  border: 1px solid #ddd;

  &__header {
    background: #f8fafc;
    padding: 1rem;

    &--active {
      background: #e2e8f0;
    }
  }

  &__body {
    padding: 1rem;

    &--hidden {
      display: none;
    }
  }

  &--bordered {
    border-width: 2px;
  }
}

Compiles to:

.accordion { border: 1px solid #ddd; }
.accordion__header { background: #f8fafc; padding: 1rem; }
.accordion__header--active { background: #e2e8f0; }
.accordion__body { padding: 1rem; }
.accordion__body--hidden { display: none; }
.accordion--bordered { border-width: 2px; }

Expected output: BEM naming is clean and maintainable with the & concatenating elements and modifiers.

Adjacent and Child Selectors

.list {
  list-style: none;

  & > li {
    padding: 0.5rem 0;
  }

  & + .list {
    margin-top: 1rem;
  }

  & ~ .other {
    opacity: 0.5;
  }
}

Compiles to:

.list { list-style: none; }
.list > li { padding: 0.5rem 0; }
.list + .list { margin-top: 1rem; }
.list ~ .other { opacity: 0.5; }

Expected output: The & combines with child, adjacent, and sibling combinators.

Multiple & References

.alert {
  padding: 1rem;

  .dark-theme & {
    background: #1e293b;
    color: #e2e8f0;
  }
}

Compiles to:

.alert { padding: 1rem; }
.dark-theme .alert { background: #1e293b; color: #e2e8f0; }

Expected output: The .dark-theme selector appears before .alert in the compiled CSS, creating a contextual override pattern.

String Interpolation with &

$suffix: "dark";

.theme-#{$suffix} & {
  background: #1e293b;
}

.button {
  &--#{$suffix} {
    background: #333;
  }
}

Compiles to:

.theme-dark .button { background: #1e293b; }
.button--dark { background: #333; }

Expected output: Variables and selectors combine dynamically with the &.

Common Mistakes

1. Missing & Before Pseudo-Classes

Writing :hover without & compiles to .parent :hover (descendant), not .parent:hover.

2. Overusing & for Concatenation

&.active and .parent.active are equivalent. Choose the clearest approach for readability.

3. Using & Without Understanding Output

The & always references the full parent selector chain, not just the immediate parent.

4. Forgetting Spaces Around &

& .child (with space) compiles to .parent .child (descendant). &.child (no space) compiles to .parent.child (compound).

5. Deep Nesting with &

Deeply nested & selectors create long, specific selectors that are hard to debug.

Practice Questions

1. What does &:hover compile to? The parent selector concatenated with :hover, e.g., .button:hover.

2. How do you write a child selector using &? & > .child { ... } compiles to .parent > .child.

3. What is the BEM pattern using &? &__element for elements and &--modifier for modifiers within a block.

4. How do you reference the parent from outside the block? Use .outer & { ... } inside a nested block to output .outer .parent.

5. Can & be used multiple times in one selector? Yes. &.active &__title is valid but creates complex selectors.

Challenge

Write SCSS for a card component using BEM with & for the block, elements, and modifiers. Include hover state on the card, an image element, a title element, and a featured modifier. All must use the & parent selector.

FAQ

Mini Project

Build an accordion component using BEM with the & parent selector. Include block (accordion), elements (header, body, icon), and modifiers (active, disabled). Style hover states and the active modifier all inside the block declaration.

What's Next

Learn Partials and Import for organizing Sass into modular files. Then explore Sass Modules for modern module management.