The parent selector & refers to the outer selector inside a nested rule. Sass replaces & with that outer selector instead of the default descendant join (a space).
&:hover becomes .alert:hover; [dir=rtl] & becomes [dir=rtl] .alert.
If the parent ends with a class/ID/element name, append text: &__copy, &--open.
& must start a compound selector where a type selector would be allowed. span& is invalid.
.alert {
&:hover { ... } // .alert:hover
&.is-active { ... } // .alert.is-active
[dir=rtl] & { ... } // [dir=rtl] .alert
:not(&) { ... } // :not(.alert)
&__copy { ... } // .alert__copy
}
// In SassScript: & is the current parent (or null outside rules)
@if & { ... }Pattern: nest under a parent → place & where the outer selector should appear → compile attached selectors.
Where & usually appears:
| Pattern | Result idea |
|---|---|
&:hover / &:focus | Pseudo-class on the parent |
&.is-active | Extra class on the same element |
.context & | Parent when inside another selector |
&__el / &--mod | BEM-style name suffixes |
& in SassScript | Current parent selector, or null outside rules |
Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).
Pseudo-class, outer context, and :not(&).
.alert {
&:hover {
font-weight: bold;
}
[dir=rtl] & {
margin-left: 0;
margin-right: 10px;
}
:not(&) {
opacity: 0.8;
}
}Append __ / -- text when the parent ends with a name.
.accordion {
max-width: 600px;
&__copy {
display: none;
&--open {
display: block;
}
}
}.accordion..accordion__copy.Attach another class to the parent with &.is-active.
.btn {
color: #111;
&.is-active {
color: #000;
}
}.btn.is-active.Outside a rule, & is null (falsey)—branch accordingly.
@mixin app-background($color) {
@if & {
&.app-background {
background-color: $color;
}
} @else {
.app-background {
background-color: $color;
}
}
}
@include app-background(#036);
.sidebar {
@include app-background(#c6538c);
}& == null.selector.unify + @at-rootAdvanced: combine & with an element selector without double-nesting.
@use "sass:selector";
@mixin unify-parent($child) {
@at-root #{selector.unify(&, $child)} {
@content;
}
}
.wrapper .field {
@include unify-parent("input") {
border: 1px solid;
}
}& with input..wrapper input.field.selector.unify().Most & bugs are forgetting it for states or misplacing it in a compound selector.
Without &, nested :hover is not the same as &:hover. See nesting.
span& is invalid. Keep & at the start of the compound selector.
Useful in mixins; do not assume a parent always exists.
Use @at-root when combining with selector functions so Sass does not wrap again.
Parent selector is core Sass nesting on Dart Sass.
| Feature | Status |
|---|---|
& in nested selectors | Supported |
| BEM-style suffixes | Supported when parent ends with a name |
& outside nesting | Dart Sass 1.100+ emits plain CSS & |
SassScript & | Parent selector value, or null outside rules |
Compile with the Dart Sass CLI.
[dir=rtl] & places the parent later.One line: use & whenever nesting should attach to the parent instead of creating a descendant.
Practical checklist:
1. Nest under a parent rule
2. Write &:hover / &.is-active / &__el as needed
3. Put context selectors before & when required
4. Remember & is null outside style rules
5. Use @at-root with selector functions that interpolate &Create silent % selectors to share styles with @extend.
8 people found this page helpful