Spezielle Funktionen

CSS definiert viele Funktionen, und die meisten davon funktionieren problemlos mit der normalen Funktionssyntax von Sass. Sie werden als Funktionsaufrufe analysiert, als normale CSS-Funktionen aufgelöst und unverändert in CSS kompiliert. Es gibt jedoch einige Ausnahmen, die eine spezielle Syntax haben und nicht einfach als SassScript-Ausdruck analysiert werden können. Alle speziellen Funktionsaufrufe geben nicht zitierte Strings zurück.

url()url() Permalink

Die url()-Funktion wird häufig in CSS verwendet, aber ihre Syntax unterscheidet sich von anderen Funktionen: Sie kann entweder eine zitierte oder eine unzitierte URL annehmen. Da eine unzitierte URL kein gültiger SassScript-Ausdruck ist, benötigt Sass eine spezielle Logik, um sie zu analysieren zu können.

Wenn das Argument von url() eine gültige unzitierte URL ist, analysiert Sass es unverändert, obwohl auch Interpolation verwendet werden kann, um SassScript-Werte einzufügen. Wenn es sich nicht um eine gültige unzitierte URL handelt – zum Beispiel, wenn sie Variablen oder Funktionsaufrufe enthält –, wird sie als normaler normaler CSS-Funktionsaufruf analysiert .

Spielplatz

SCSS-Syntax

$roboto-font-path: "../fonts/roboto";

@font-face {
    // This is parsed as a normal function call that takes a quoted string.
    src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2");

    font-family: "Roboto";
    font-weight: 100;
}

@font-face {
    // This is parsed as a normal function call that takes an arithmetic
    // expression.
    src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2");

    font-family: "Roboto";
    font-weight: 300;
}

@font-face {
    // This is parsed as an interpolated special function.
    src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2");

    font-family: "Roboto";
    font-weight: 400;
}
Spielplatz

Sass-Syntax

$roboto-font-path: "../fonts/roboto"

@font-face
    // This is parsed as a normal function call that takes a quoted string.
    src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2")

    font-family: "Roboto"
    font-weight: 100


@font-face
    // This is parsed as a normal function call that takes an arithmetic
    // expression.
    src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2")

    font-family: "Roboto"
    font-weight: 300


@font-face
    // This is parsed as an interpolated special function.
    src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2")

    font-family: "Roboto"
    font-weight: 400

CSS-Ausgabe

@font-face {
  src: url("../fonts/roboto/Roboto-Thin.woff2") format("woff2");
  font-family: "Roboto";
  font-weight: 100;
}
@font-face {
  src: url("../fonts/roboto/Roboto-Light.woff2") format("woff2");
  font-family: "Roboto";
  font-weight: 300;
}
@font-face {
  src: url(../fonts/roboto/Roboto-Regular.woff2) format("woff2");
  font-family: "Roboto";
  font-weight: 400;
}

element(), progid:...() und expression()element(), progid:…(), und expression()  Permalink

Kompatibilität (calc())
Dart Sass
seit <1.40.0
LibSass
✗
Ruby Sass
✗

LibSass, Ruby Sass und Versionen von Dart Sass vor 1.40.0 analysieren calc() wie eine spezielle syntaktische Funktion wie element().

Dart Sass-Versionen 1.40.0 und neuer analysieren calc() als Berechnung.

Kompatibilität (clamp())
Dart Sass
seit >=1.31.0 <1.40.0
LibSass
✗
Ruby Sass
✗

LibSass, Ruby Sass und Versionen von Dart Sass vor 1.31.0 analysieren clamp() als normale CSS-Funktion anstatt spezielle Syntax darin zu unterstützen .

Dart Sass-Versionen zwischen 1.31.0 und 1.40.0 analysieren clamp() als spezielle syntaktische Funktion wie element().

Dart Sass-Versionen 1.40.0 und neuer analysieren clamp() als Berechnung.

Die element()-Funktion ist in der CSS-Spezifikation definiert, und da ihre IDs als Farben analysiert werden könnten, benötigen sie eine spezielle Analyse .

expression() und Funktionen, die mit progid: beginnen, sind Legacy-Internet-Explorer-Funktionen, die eine nicht standardmäßige Syntax verwenden. Obwohl sie von neueren Browsern nicht mehr unterstützt werden, analysiert Sass sie weiterhin zur Abwärtskompatibilität .

Sass erlaubt *beliebigen Text* in diesen Funktionsaufrufen, einschließlich verschachtelter Klammern. Nichts wird als SassScript-Ausdruck interpretiert, mit der Ausnahme, dass Interpolation verwendet werden kann, um dynamische Werte einzufügen .

Spielplatz

SCSS-Syntax

$logo-element: logo-bg;

.logo {
  background: element(##{$logo-element});
}
Spielplatz

Sass-Syntax

$logo-element: logo-bg

.logo
  background: element(##{$logo-element})

CSS-Ausgabe

.logo {
  background: element(#logo-bg);
}