Sass Parent Selector

What You’ll Learn

The Sass parent selector (&) refers to the outer selector inside nested rules. Use it for pseudo-classes, BEM suffixes, parent context, SassScript introspection, and advanced nesting with selector.unify. Five compiled examples follow.

What Is the Parent Selector?

& is a special selector invented by Sass. Inside a nested rule it means “the outer selector.” When Sass compiles, it replaces & with that outer selector instead of applying normal nesting.

• Add a pseudo-class: &:hover → .alert:hover
• Style the parent in a context: [dir=rtl] & → [dir=rtl] .alert
• Pass the parent into a pseudo-class: :not(&) → :not(.alert)
• Append BEM pieces: &__copy → .accordion__copy

📝 Basic Syntax

.alert {
  // Pseudo-class on the outer selector
  &:hover {
    font-weight: bold;
  }

  // Outer selector in a certain context
  [dir=rtl] & {
    margin-left: 0;
    margin-right: 10px;
  }

  // Parent as an argument to a pseudo-class
  :not(&) {
    opacity: 0.8;
  }
}

🏷️ Adding Suffixes

If the outer selector ends with an alphanumeric name (class, ID, or element), you can append extra text after &. This shines with BEM-style class names.

.accordion {
  &__copy {
    display: none;

    &--open {
      display: block;
    }
  }
}
// .accordion__copy / .accordion__copy--open

📄 Without Nesting

In Dart Sass 1.100.0+, you can write & { … } outside any nest. Sass emits a literal CSS & for the browser’s scoping root. You cannot append suffixes to a non-nested parent selector—there is nothing to suffix.

Older compilers (including Dart Sass 1.69.x used in many projects) still error with “Top-level selectors may not contain the parent selector &.” Prefer nested & until your toolchain upgrades.

🔢 & in SassScript

As a SassScript expression, & returns the current parent selector in the same shape selector functions use: a comma-separated list of space-separated lists of unquoted strings.

Outside any style rule, & is null (falsey). Mixins often use if(&, …, …) to behave differently when included at the root vs inside a rule.

Examples Gallery

Each example is verified with Dart Sass. Open View Compiled CSS for output.

.alert {
  &:hover {
    font-weight: bold;
  }

  [dir=rtl] & {
    margin-left: 0;
    margin-right: 10px;
  }

  :not(&) {
    opacity: 0.8;
  }
}

.alert:hover {
  font-weight: bold;
}
[dir=rtl] .alert {
  margin-left: 0;
  margin-right: 10px;
}
:not(.alert) {
  opacity: 0.8;
}

.accordion {
  max-width: 600px;
  margin: 4rem auto;
  width: 90%;
  font-family: "Raleway", sans-serif;
  background: #f4f4f4;

  &__copy {
    display: none;
    padding: 1rem 1.5rem 2rem 1.5rem;
    color: gray;
    line-height: 1.6;
    font-size: 14px;
    font-weight: 500;

    &--open {
      display: block;
    }
  }
}

.accordion {
  max-width: 600px;
  margin: 4rem auto;
  width: 90%;
  font-family: "Raleway", sans-serif;
  background: #f4f4f4;
}
.accordion__copy {
  display: none;
  padding: 1rem 1.5rem 2rem 1.5rem;
  color: gray;
  line-height: 1.6;
  font-size: 14px;
  font-weight: 500;
}
.accordion__copy--open {
  display: block;
}

.main aside:hover,
.sidebar p {
  // & is a list of lists of unquoted strings
  parent-selector: &;
}

.main aside:hover,
.sidebar p {
  parent-selector: .main aside:hover, .sidebar p;
}

@mixin app-background($color) {
  #{if(&, '&.app-background', '.app-background')} {
    background-color: $color;
    color: rgba(#fff, 0.75);
  }
}

@include app-background(#036);

.sidebar {
  @include app-background(#c6538c);
}

.app-background {
  background-color: #036;
  color: rgba(255, 255, 255, 0.75);
}

.sidebar.app-background {
  background-color: #c6538c;
  color: rgba(255, 255, 255, 0.75);
}

@use "sass:selector";

@mixin unify-parent($child) {
  @at-root #{selector.unify(&, $child)} {
    @content;
  }
}

.wrapper .field {
  @include unify-parent("input") {
    border: 1px solid #ccc;
  }
  @include unify-parent("select") {
    border: 1px solid #999;
  }
}

.wrapper input.field {
  border: 1px solid #ccc;
}

.wrapper select.field {
  border: 1px solid #999;
}

🚀 Real-World Use Cases

• Component states — &:hover, &:focus-visible, &[disabled].
• BEM / ITCSS naming — keep __element and --modifier next to the block.
• Theme / RTL overrides — .theme-dark & or [dir=rtl] &.
• Smart mixins — branch on if(&) for root vs nested includes.
• Selector math — selector.unify / selector.append with @at-root.

⚠️ Common Pitfalls

• span& — invalid placement; & must start the compound selector.
• Forgetting @at-root — interpolated & still gets nested again.
• Suffix on complex parents — appending text only works when the outer ends in a simple name.
• Top-level & on old Sass — needs Dart Sass 1.100+; errors on 1.69.x.
• Assuming & outside rules is "" — it is null, not an empty string.

💡 Best Practices