Breaking Change: CSS-Variablen-Syntax

Ältere Versionen von LibSass und Ruby Sass analysierten benutzerdefinierte Eigenschaftsdeklarationen wie jede andere Eigenschaftsdeklaration und erlaubten den vollen Umfang von SassScript-Ausdrücken als Werte. Dies war jedoch nicht mit  CSS kompatibel.

Kompatibilität
Dart Sass
✓
LibSass
seit 3.5.0
Ruby Sass
seit 3.5.0

Die CSS-Spezifikation erlaubt fast jede Zeichenkette in benutzerdefinierten Eigenschaftsdeklarationen. Auch wenn diese Werte für keine CSS-Eigenschaft sinnvoll waren, konnten sie über JavaScript abgerufen werden. Als sie als SassScript-Werte analysiert wurden, schlug die Syntax, die gültiges einfaches CSS gewesen wäre, beim Parsen fehl. Zum Beispiel verwendete die Polymer-Bibliothek dies zur Unterstützung von einfachen CSS- Mixins.

Spielplatz

SCSS-Syntax

:root {
  --flex-theme: {
    border: 1px solid var(--theme-dark-blue);
    font-family: var(--theme-font-family);
    padding: var(--theme-wide-padding);
    background-color: var(--theme-light-blue);
  };
}

CSS-Ausgabe

:root {
  --flex-theme: {
    border: 1px solid var(--theme-dark-blue);
    font-family: var(--theme-font-family);
    padding: var(--theme-wide-padding);
    background-color: var(--theme-light-blue);
  };
}

Um maximale Kompatibilität mit einfachem CSS zu gewährleisten, erfordern neuere Versionen von Sass, dass SassScript-Ausdrücke in benutzerdefinierten Eigenschaftswerten innerhalb von Interpolation geschrieben werden. Interpolation funktioniert auch für ältere Sass-Versionen und wird daher für alle  Stylesheets empfohlen.

Spielplatz

SCSS-Syntax

$accent-color: #fbbc04;

:root {
  // WRONG, will not work in recent Sass versions.
  --accent-color-wrong: $accent-color;

  // RIGHT, will work in all Sass versions.
  --accent-color-right: #{$accent-color};
}
Spielplatz

Sass-Syntax

$accent-color: #fbbc04

:root
  // WRONG, will not work in recent Sass versions.
  --accent-color-wrong: $accent-color

  // RIGHT, will work in all Sass versions.
  --accent-color-right: #{$accent-color}

CSS-Ausgabe

:root {
  --accent-color-wrong: $accent-color;
  --accent-color-right: #fbbc04;
}

⚠️ Vorsicht!

Da Interpolation Anführungszeichen aus zitierten Zeichenketten entfernt, kann es notwendig sein, diese in die meta.inspect()-Funktion einzuschließen, um ihre  Anführungszeichen zu erhalten.

Spielplatz

SCSS-Syntax

@use "sass:meta";

$font-family-monospace: Menlo, Consolas, "Courier New", monospace;

:root {
  --font-family-monospace: #{meta.inspect($font-family-monospace)};
}
Spielplatz

Sass-Syntax

@use "sass:meta"

$font-family-monospace: Menlo, Consolas, "Courier New", monospace

:root
  --font-family-monospace: #{meta.inspect($font-family-monospace)}

CSS-Ausgabe

:root {
  --font-family-monospace: Menlo, Consolas, "Courier New", monospace;
}