Skip to main content

Sass: & in SassScript

The parent selector, &, is a special selector used in nested selectors to refer to the outer selector. It makes it possible to re-use the outer selector.

& in SassScript​

The parent selector can also be used within SassScript. It’s a special expression that returns the current parent selector in the same format used by selector functions: a comma-separated list (the selector list) that contains space-separated lists (the complex selectors) that contain unquoted strings (the compound selectors).

.main aside:hover,
.sidebar p {
  parent-selector: &;
  // => ((unquote(".main") unquote("aside:hover")),
  //     (unquote(".sidebar") unquote("p")))
}

If the & expression is used outside any style rules, it returns null. Since null is falsy, this means you can easily use it to determine whether a mixin is being called in a style rule or not.

@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);
}

Table of Contents