Elternselektor

Der Parent-Selektor, &, ist ein spezieller Selektor, der von Sass erfunden wurde und in verschachtelten Selektoren verwendet wird, um auf den äußeren Selektor zu verweisen. Er ermöglicht die Wiederverwendung des äußeren Selektors auf komplexere Weise, z. B. durch Hinzufügen einer Pseudo-Klasse oder durch Hinzufügen eines Selektors *vor* dem Parent.

Wenn ein Parent-Selektor in einem inneren Selektor verwendet wird, wird er durch den entsprechenden äußeren Selektor ersetzt. Dies geschieht anstelle des normalen Verschachtelungsverhaltens .

Spielplatz

SCSS-Syntax

.alert {
  // The parent selector can be used to add pseudo-classes to the outer
  // selector.
  &:hover {
    font-weight: bold;
  }

  // It can also be used to style the outer selector in a certain context, such
  // as a body set to use a right-to-left language.
  [dir=rtl] & {
    margin-left: 0;
    margin-right: 10px;
  }

  // You can even use it as an argument to pseudo-class selectors.
  :not(&) {
    opacity: 0.8;
  }
}
Spielplatz

Sass-Syntax

.alert
  // The parent selector can be used to add pseudo-classes to the outer
  // selector.
  &:hover
    font-weight: bold


  // It can also be used to style the outer selector in a certain context, such
  // as a body set to use a right-to-left language.
  [dir=rtl] &
    margin-left: 0
    margin-right: 10px


  // You can even use it as an argument to pseudo-class selectors.
  :not(&)
    opacity: 0.8

CSS-Ausgabe

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

⚠️ Vorsicht!

Da der Parent-Selektor durch einen Typselektor wie h1 ersetzt werden könnte, ist er nur am Anfang von zusammengesetzten Selektoren erlaubt, wo auch ein Typselektor erlaubt wäre. Zum Beispiel ist span& nicht erlaubt.

Wir erwägen jedoch, diese Einschränkung zu lockern. Wenn Sie dazu beitragen möchten, werfen Sie einen Blick auf dieses GitHub Issue.

Hinzufügen von SuffixenHinzufügen von Suffixen Permalink

Sie können den Parent-Selektor auch verwenden, um dem äußeren Selektor zusätzliche Suffixe hinzuzufügen. Dies ist besonders nützlich, wenn Sie eine Methodik wie BEM verwenden, die stark strukturierte Klassennamen verwendet. Solange der äußere Selektor mit einem alphanumerischen Namen endet (wie bei Klassen-, ID- und Elementselektoren), können Sie den Parent-Selektor verwenden, um zusätzlichen Text anzuhängen.

Spielplatz

SCSS-Syntax

.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;
    }
  }
}
Spielplatz

Sass-Syntax

.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

CSS-Ausgabe

.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;
}

In SassScriptIn SassScript Permalink

Der Parent-Selektor kann auch innerhalb von SassScript verwendet werden. Es ist ein spezieller Ausdruck, der den aktuellen Parent-Selektor im gleichen Format zurückgibt, wie es von Selektorfunktionen verwendet wird: eine durch Kommas getrennte Liste (die Selektorliste), die durch Leerzeichen getrennte Listen (die komplexen Selektoren) enthält, die ungequotete Zeichenketten (die zusammengesetzten Selektoren) enthalten.

Spielplatz

SCSS-Syntax

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

Sass-Syntax

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

CSS-Ausgabe

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

Wenn der &-Ausdruck außerhalb von Stilregeln verwendet wird, gibt er null zurück. Da null falsey ist, können Sie ihn leicht verwenden, um festzustellen, ob ein Mixin in einer Stilregel aufgerufen wird oder nicht.

Spielplatz

SCSS-Syntax

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

Sass-Syntax

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

CSS-Ausgabe

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

Erweiterte VerschachtelungErweiterte Verschachtelung Permalink

Sie können & als normalen SassScript-Ausdruck verwenden, was bedeutet, dass Sie ihn an Funktionen übergeben oder in Interpolation einbeziehen können – sogar in anderen Selektoren! Die Verwendung in Kombination mit Selektorfunktionen und der @at-root-Regel ermöglicht es Ihnen, Selektoren auf sehr leistungsfähige Weise zu verschachteln.

Angenommen, Sie möchten zum Beispiel einen Selektor schreiben, der mit dem äußeren Selektor *und* einem Elementselektor übereinstimmt. Sie könnten einen Mixin wie diesen schreiben, der die selector.unify()-Funktion verwendet, um & mit einem vom Benutzer bereitgestellten Selektor zu kombinieren.

Spielplatz

SCSS-Syntax

@use "sass:selector";

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

.wrapper .field {
  @include unify-parent("input") {
    /* ... */
  }
  @include unify-parent("select") {
    /* ... */
  }
}
Spielplatz

Sass-Syntax

@use "sass:selector"

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



.wrapper .field
  @include unify-parent("input")
    /* ... */

  @include unify-parent("select")
    /* ... */

CSS-Ausgabe

.wrapper input.field {
  /* ... */
}

.wrapper select.field {
  /* ... */
}

⚠️ Vorsicht!

Wenn Sass Selektoren verschachtelt, weiß es nicht, welche Interpolation zur Generierung dieser Selektoren verwendet wurde. Das bedeutet, dass es automatisch den äußeren Selektor zum inneren Selektor hinzufügt, *auch wenn* Sie & als SassScript-Ausdruck verwendet haben. Deshalb müssen Sie explizit die @at-root-Regel verwenden, um Sass anzuweisen, den äußeren Selektor nicht einzuschließen.