Interpolation

Interpolation kann fast überall in einem Sass-Stylesheet verwendet werden, um das Ergebnis eines SassScript-Ausdrucks in einen Teil von CSS einzubetten. Umschließen Sie einfach einen Ausdruck in #{} an einem der folgenden Orte

Spielplatz

SCSS-Syntax

@mixin corner-icon($name, $top-or-bottom, $left-or-right) {
  .icon-#{$name} {
    background-image: url("/icons/#{$name}.svg");
    position: absolute;
    #{$top-or-bottom}: 0;
    #{$left-or-right}: 0;
  }
}

@include corner-icon("mail", top, left);
Spielplatz

Sass-Syntax

@mixin corner-icon($name, $top-or-bottom, $left-or-right)
  .icon-#{$name}
    background-image: url("/icons/#{$name}.svg")
    position: absolute
    #{$top-or-bottom}: 0
    #{$left-or-right}: 0



@include corner-icon("mail", top, left)

CSS-Ausgabe

.icon-mail {
  background-image: url("/icons/mail.svg");
  position: absolute;
  top: 0;
  left: 0;
}

In SassScriptIn SassScript Permalink

Kompatibilität (moderne Syntax)
Dart Sass
✓
LibSass
✗
Ruby Sass
seit 4.0.0 (unveröffentlicht)

LibSass und Ruby Sass verwenden derzeit eine ältere Syntax zum Parsen von Interpolation in SassScript. Für die meisten praktischen Zwecke funktioniert sie gleich, aber sie kann sich seltsam verhalten, wenn es um Operatoren geht. Weitere Einzelheiten finden Sie in diesem Dokument.

Interpolation kann in SassScript verwendet werden, um SassScript in nicht angeführte Zeichenketten einzufügen. Dies ist besonders nützlich, wenn dynamisch Namen generiert werden (z. B. für Animationen) oder wenn schrägstrichgetrennte Werte verwendet werden. Beachten Sie, dass die Interpolation in SassScript immer eine nicht angeführte Zeichenkette zurückgibt .

Spielplatz

SCSS-Syntax

@mixin inline-animation($duration) {
  $name: inline-#{unique-id()};

  @keyframes #{$name} {
    @content;
  }

  animation-name: $name;
  animation-duration: $duration;
  animation-iteration-count: infinite;
}

.pulse {
  @include inline-animation(2s) {
    from { background-color: yellow }
    to { background-color: red }
  }
}
Spielplatz

Sass-Syntax

@mixin inline-animation($duration)
  $name: inline-#{unique-id()}

  @keyframes #{$name}
    @content


  animation-name: $name
  animation-duration: $duration
  animation-iteration-count: infinite


.pulse
  @include inline-animation(2s)
    from
      background-color: yellow
    to
      background-color: red

CSS-Ausgabe

.pulse {
  animation-name: inline-uifpe6h;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes inline-uifpe6h {
  from {
    background-color: yellow;
  }
  to {
    background-color: red;
  }
}

💡 Lustige Tatsache

Interpolation ist nützlich zum Einfügen von Werten in Zeichenketten, aber abgesehen davon ist sie in SassScript-Ausdrücken selten notwendig. Sie benötigen sie definitiv *nicht*, um einfach eine Variable in einem Eigenschaftswert zu verwenden. Anstatt color: #{$accent} zu schreiben, können Sie einfach color: $accent schreiben!

⚠️ Vorsicht!

Es ist fast immer eine schlechte Idee, Interpolation mit Zahlen zu verwenden. Interpolation gibt nicht angeführte Zeichenketten zurück, die nicht für weitere Berechnungen verwendet werden können, und sie umgeht die integrierten Schutzmaßnahmen von Sass, um sicherzustellen, dass Einheiten korrekt verwendet werden .

Sass verfügt über eine leistungsstarke Einheitenarithmetik, die Sie stattdessen verwenden können. Anstatt beispielsweise #{$width}px zu schreiben, verwenden Sie $width * 1px – oder noch besser, deklarieren Sie die Variable $width von vornherein in Bezug auf px. Auf diese Weise erhalten Sie, wenn $width bereits Einheiten hat, eine aussagekräftige Fehlermeldung anstelle von kompilierbarem fehlerhaftem CSS.

Quoted StringsQuoted Strings Permalink

In den meisten Fällen fügt Interpolation denselben Text ein, der verwendet würde, wenn der Ausdruck als Eigenschaftswert verwendet würde. Es gibt jedoch eine Ausnahme: Die Anführungszeichen um angeführte Zeichenketten werden entfernt (auch wenn diese angeführten Zeichenketten in Listen stehen). Dies ermöglicht es, angeführte Zeichenketten zu schreiben, die Syntax enthalten, die in SassScript nicht zulässig ist (z. B. Selektoren), und sie in Stilregeln zu interpolieren .

Spielplatz

SCSS-Syntax

.example {
  unquoted: #{"string"};
}
Spielplatz

Sass-Syntax

.example
  unquoted: #{"string"}

CSS-Ausgabe

.example {
  unquoted: string;
}

⚠️ Vorsicht!

Auch wenn es verlockend ist, diese Funktion zum Konvertieren von angeführten Zeichenketten in nicht angeführte Zeichenketten zu verwenden, ist es viel klarer, die string.unquote()-Funktion zu verwenden. Anstatt #{$string} zu schreiben, schreiben Sie string.unquote($string)!