@at-root

Die Regel @at-root wird normalerweise als @at-root <selector> { ... } geschrieben und bewirkt, dass alles darin auf der Stammebene des Dokuments ausgegeben wird, anstatt die normale Verschachtelung zu verwenden. Sie wird am häufigsten verwendet, wenn erweitertes Verschachteln mit dem SassScript-Elternselektor und selector-Funktionen verwendet wird.

Wenn Sie beispielsweise einen Selektor schreiben möchten, der dem äußeren Selektor und einem Elementselektor entspricht. Sie könnten eine Mixin wie diese schreiben, die 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 {
  /* ... */
}

Die Regel @at-root ist hier notwendig, da Sass nicht weiß, welche Interpolation zur Erzeugung eines Selektors verwendet wurde, wenn es die Selektorverschachtelung durchführt. Das bedeutet, dass es den äußeren Selektor automatisch zum inneren Selektor hinzufügt, auch wenn Sie & als SassScript-Ausdruck verwendet haben. @at-root weist Sass explizit an, den äußeren Selektor nicht einzubeziehen.

💡 Lustige Tatsache

Die Regel @at-root kann auch als @at-root { ... } geschrieben werden, um mehrere Stilregeln auf der Stammebene des Dokuments zu platzieren. Tatsächlich ist @at-root <selector> { ... } nur eine Kurzform für @at-root { <selector> { ... } }!

Jenseits von StilregelnJenseits von Stilregeln  Permalink

Für sich genommen entfernt @at-root nur Stilregeln. Alle At-Regeln wie @media oder @supports bleiben erhalten. Wenn Sie dies nicht wünschen, können Sie jedoch mithilfe von Syntaxen wie Media-Query-Funktionen, die als @at-root (with: <rules...>) { ... } oder @at-root (without: <rules...>) { ... } geschrieben werden, genau steuern, was ein- oder ausgeschlossen wird. Die (without: ...)-Abfrage teilt Sass mit, welche Regeln ausgeschlossen werden sollen; die (with: ...)-Abfrage schließt alle Regeln aus, außer denen, die aufgeführt sind.

Spielplatz

SCSS-Syntax

@media print {
  .page {
    width: 8in;

    @at-root (without: media) {
      color: #111;
    }

    @at-root (with: rule) {
      font-size: 1.2em;
    }
  }
}
Spielplatz

Sass-Syntax

@media print
  .page
    width: 8in

    @at-root (without: media)
      color: #111


    @at-root (with: rule)
      font-size: 1.2em

CSS-Ausgabe

@media print {
  .page {
    width: 8in;
  }
}
.page {
  color: #111;
}
.page {
  font-size: 1.2em;
}

Zusätzlich zu den Namen von At-Regeln gibt es zwei spezielle Werte, die in Abfragen verwendet werden können

  • rule bezieht sich auf Stilregeln. Zum Beispiel schließt @at-root (with: rule) alle At-Regeln aus, bewahrt aber Stilregeln.

  • all bezieht sich auf alle At-Regeln und Stilregeln, die ausgeschlossen werden sollen.