Berechnungen

Berechnungen sind die Art und Weise, wie Sass die calc()-Funktion sowie ähnliche Funktionen wie clamp(), min() und max() darstellt. Sass vereinfacht diese so weit wie möglich, auch wenn sie mit einer anderen kombiniert werden.

Dart Sass: seit 1.40.0
LibSass: ✗
Ruby Sass: ✗

LibSass, Ruby Sass und Versionen von Dart Sass vor 1.40.0 parsen calc() als spezielle Funktion wie element().

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

Dart Sass: seit 1.67.0
LibSass: ✗
Ruby Sass: ✗

Versionen von Dart Sass zwischen 1.40.0 und 1.67.0 erlauben keine mehreren Werte in Berechnungen, die nicht durch einen Operator getrennt sind, selbst in Fällen wie calc(1 var(--plus-two)), was gültiges CSS ist (da --plus-two als + 2 definiert werden kann).

Ab Dart Sass 1.67.0 können mehrere Werte in einer Berechnung durch Leerzeichen getrennt werden, solange jeder andere Wert zu einem ungequoteten String ausgewertet wird (wie ein var()-Ausdruck oder der ungequotete String "+ 2").

  SCSS

  Sass

       SpielplatzSCSS-Syntax@debug calc(400px + 10%); // calc(400px + 10%)
@debug calc(400px / 2); // 200px
@debug min(100px, calc(1rem + 10%)); // min(100px, 1rem + 10%)

       SpielplatzSass-Syntax@debug calc(400px + 10%)  // calc(400px + 10%)
@debug calc(400px / 2)  // 200px
@debug min(100px, calc(1rem + 10%)) ; // min(100px, 1rem + 10%)

Berechnungen verwenden eine spezielle Syntax, die sich von normalem SassScript unterscheidet. Es ist die gleiche Syntax wie bei der CSS calc(), aber mit der zusätzlichen Möglichkeit, Sass-Variablen zu verwenden und Sass-Funktionen aufzurufen. Das bedeutet, dass / innerhalb einer Berechnung immer ein Divisionsoperator ist!

💡 Lustige Tatsache

Die Argumente eines Sass-Funktionsaufrufs verwenden die normale Sass-Syntax, anstatt die spezielle Berechnungs- Syntax!

Sie können auch Interpolation in einer Berechnung verwenden. Wenn Sie dies tun, werden jedoch keine Operationen, die diese Interpolation beinhalten, vereinfacht oder typgeprüft, sodass es leicht ist, zusätzlichen Overhead oder sogar ungültiges CSS zu erhalten. Anstatt calc(10px + #{$var}) zu schreiben, schreiben Sie einfach calc(10px + $var)!

VereinfachungVereinfachung Permalink

Sass vereinfacht benachbarte Operationen in Berechnungen, wenn diese Einheiten verwenden, die zur Kompilierzeit kombiniert werden können, wie z. B. 1in + 10px oder 5s * 2. Wenn möglich, vereinfacht es sogar die gesamte Berechnung zu einer einzelnen Zahl – zum Beispiel wird clamp(0px, 30px, 20px) 20px zurückgeben.

⚠️ Vorsicht!

Das bedeutet, dass ein Berechnungsausdruck nicht unbedingt immer eine Berechnung zurückgibt! Wenn Sie eine Sass-Bibliothek schreiben, können Sie immer die Funktion meta.type-of() verwenden, um zu bestimmen, mit welchem Typ Sie es zu tun haben.

Berechnungen werden auch innerhalb anderer Berechnungen vereinfacht. Insbesondere wenn ein calc() in einer anderen Berechnung landet, wird der Funktionsaufruf entfernt und durch eine einfache alte Operation ersetzt.

  SCSS

  Sass

  CSS

       SpielplatzSCSS-Syntax$width: calc(400px + 10%);

.sidebar {
  width: $width;
  padding-left: calc($width / 4);
}

       SpielplatzSass-Syntax$width: calc(400px + 10%)

.sidebar
  width: $width
  padding-left: calc($width / 4)

CSS-Ausgabe.sidebar {
  width: calc(400px + 10%);
  padding-left: calc((400px + 10%) / 4);
}

OperationenOperationen Permalink

Sie können Berechnungen nicht mit normalen SassScript-Operationen wie + und * verwenden. Wenn Sie mathematische Funktionen schreiben möchten, die Berechnungen zulassen, schreiben Sie diese einfach innerhalb ihrer eigenen calc()-Ausdrücke – wenn ihnen eine Reihe von Zahlen mit kompatiblen Einheiten übergeben wird, geben sie auch normale Zahlen zurück, und wenn ihnen Berechnungen übergeben werden, geben sie Berechnungen zurück.

Diese Einschränkung besteht, um sicherzustellen, dass Berechnungen, wenn sie nicht gewünscht sind, so schnell wie möglich einen Fehler auslösen. Berechnungen können nicht überall verwendet werden, wo normale Zahlen verwendet werden können: Sie können beispielsweise nicht in CSS-Identifikatoren eingefügt werden (wie .item-#{$n}) und sie können nicht an die integrierten Mathematikfunktionen von Sass übergeben werden. Die Reservierung von SassScript-Operationen für normale Zahlen macht klar, wo Berechnungen zulässig sind und wo sie es nicht sind.

  SCSS

  Sass

       SpielplatzSCSS-Syntax$width: calc(100% + 10px);
@debug $width * 2; // Error!
@debug calc($width * 2); // calc((100% + 10px) * 2);

       SpielplatzSass-Syntax$width: calc(100% + 10px);
@debug $width * 2; // Error!
@debug calc($width * 2); // calc((100% + 10px) * 2);

KonstantenKonstanten Permalink

Dart Sass: seit 1.60.0
LibSass: ✗
Ruby Sass: ✗

Berechnungen können auch Konstanten enthalten, die als CSS-Identifikatoren geschrieben werden. Zur zukunftssicheren Kompatibilität mit zukünftigen CSS-Spezifikationen sind alle Identifikatoren erlaubt, und standardmäßig werden sie einfach als ungequotete Strings behandelt, die unverändert weitergegeben werden.

  SCSS

  Sass

       SpielplatzSCSS-Syntax@debug calc(h + 30deg); // calc(h + 30deg);

       SpielplatzSass-Syntax@debug calc(h + 30deg)  // calc(h + 30deg);

Sass löst automatisch einige spezielle Konstantenamen auf, die in CSS spezifiziert sind, und wandelt sie in einheitenlose Zahlen um

pi ist eine Kurzform für die mathematische Konstante π.
e ist eine Kurzform für die mathematische Konstante e.
infinity, -infinity und NaN repräsentieren die entsprechenden Gleitkomma- Werte.

  SCSS

  Sass

       SpielplatzSCSS-Syntax@use 'sass:math';

@debug calc(pi); // 3.1415926536
@debug calc(e);  // 2.7182818285
@debug calc(infinity) > math.$max-number;  // true
@debug calc(-infinity) < math.$min-number; // true

       SpielplatzSass-Syntax@use 'sass:math'

@debug calc(pi)  // 3.1415926536
@debug calc(e)   // 2.7182818285
@debug calc(infinity) > math.$max-number   // true
@debug calc(-infinity) < math.$min-number  // true

BerechnungsfunktionenBerechnungsfunktionen Permalink

Dart Sass: seit 1.65.0
LibSass: ✗
Ruby Sass: ✗

Versionen von Dart Sass 1.65.0 und neuer außer 1.66.x verarbeiten die Ausführung dieser Berechnungsfunktionen: round(), mod(), rem(), sin(), cos(), tan(), asin(), acos(), atan(), atan2(), pow(), sqrt(), hypot(), log(), exp(), abs() und sign().

In Dart Sass 1.65.x wurde jeder Funktionsaufruf, dessen Name mit einer Berechnungsfunktion übereinstimmte, immer als Berechnungsfunktion geparst. Dies hat einige bestehende benutzerdefinierte Funktionen beeinträchtigt, sodass die Unterstützung für die neuen Berechnungsfunktionen in 1.66.0 entfernt wurde, bis sie ohne Beeinträchtigung des bestehenden Verhaltens in 1.67.0 wieder hinzugefügt werden konnte.

Sass parst die folgenden Funktionen als Berechnungen

Vergleichsfunktionen: min(), max() und clamp()
Stufenwertfunktionen: round(), mod() und rem().
Trigonometrische Funktionen: sin(), cos(), tan(), asin(), acos(), atan() und atan2().
Exponentialfunktionen: pow(), sqrt(), hypot(), log() und exp().
Vorzeichenbezogene Funktionen: abs() und sign().

💡 Lustige Tatsache

Wenn Sie eine Sass-Funktion mit demselben Namen wie eine Berechnungsfunktion definiert haben, ruft Sass immer Ihre Funktion auf, anstatt einen Berechnungs- Wert zu erstellen.

Veraltete globale FunktionenVeraltete globale Funktionen Permalink

CSS hat Unterstützung für mathematische Ausdrücke in Values and Units Level 4 hinzugefügt. Sass unterstützte jedoch lange vor diesem Zeitpunkt seine eigenen round(), abs(), min() und max(), und es musste abwärtskompatibel mit all diesen bestehenden Stylesheets sein. Dies führte zu der Notwendigkeit von besonders cleverer Syntax.

Wenn ein Aufruf von round(), abs(), min() oder max() ein gültiger Berechnungsausdruck ist, wird er als Berechnung geparst. Aber sobald ein Teil des Aufrufs ein SassScript-Feature enthält, das in einer Berechnung nicht unterstützt wird, wie z. B. der Modulo-Operator, wird er stattdessen als Aufruf der entsprechenden Sass-Mathematikfunktion geparst.

Da Berechnungen sowieso zu Zahlen vereinfacht werden, wenn möglich, ist der einzige wesentliche Unterschied, dass die Sass-Funktionen nur Einheiten unterstützen, die zur Build-Zeit kombiniert werden können, sodass min(12px % 10, 10%) einen Fehler auslösen wird.

⚠️ Vorsicht!

Andere Berechnungen erlauben keine Addition, Subtraktion oder Vergleich von einheitenlosen Zahlen mit Zahlen mit Einheiten. min(), max(), abs() und einzelnes Argument round() sind jedoch anders: zur Abwärtskompatibilität mit den globalen Sass-Legacy-Funktionen, die aus historischen Gründen eine Mischung von Einheiten/Einheitenlosigkeit erlauben, können diese Einheiten gemischt werden, solange sie direkt in einer min(), max(), abs() oder einer einzelnen Argument-round()-Berechnung enthalten sind.

Zum Beispiel wird min(5 + 10px, 20px) zu 15px führen. sqrt(5 + 10px) wird jedoch einen Fehler auslösen, da sqrt(5 + 10px) nie eine globale Sass-Funktion war und dies inkompatible Einheiten sind.

`min()` und `max()`min() und max() Permalink

Dart Sass: seit >=1.11.0 <1.42.0
LibSass: ✗
Ruby Sass: ✗

LibSass, Ruby Sass und Versionen von Dart Sass vor 1.11.0 parsen min() und max() immer als Sass-Funktionen. Um einen einfachen CSS min()- oder max()-Aufruf für diese Implementierungen zu erstellen, können Sie stattdessen etwas wie unquote("min(#{$padding}, env(safe-area-inset-left))") schreiben.

CSS fügte Unterstützung für min()- und max()-Funktionen in Values and Units Level 4 hinzu, von wo aus sie schnell von Safari zur Unterstützung des iPhone X übernommen wurden. Da wir min() und max() bereits als veraltete Sass-Funktionen unterstützten, mussten wir Logik für Abwärtskompatibilität und für die Unterstützung als CSS- Funktionen implementieren.

Versionen von Dart Sass zwischen 1.11.0 und 1.40.0 sowie zwischen 1.40.1 und 1.42.0 parsen min()- und max()-Funktionen als spezielle Funktionen, wenn sie gültiges einfaches CSS sind, parsen sie aber als Sass-Funktionen, wenn sie Sass-Features außer Interpolation enthalten, wie Variablen oder Funktionsaufrufe.

Dart Sass 1.41.0 parst min()- und max()-Funktionen als Berechnungen, erlaubt aber nicht, dass einheitenlose Zahlen mit Zahlen mit Einheiten kombiniert werden. Dies war abwärtsinkompatibel mit den globalen min()- und max()-Funktionen, sodass dieses Verhalten rückgängig gemacht wurde.

  SCSS

  Sass

  CSS

       SpielplatzSCSS-Syntax$padding: 12px;

.post {
  // Since these max() calls are valid calculation expressions, they're
  // parsed as calculations.
  padding-left: max($padding, env(safe-area-inset-left));
  padding-right: max($padding, env(safe-area-inset-right));
}

.sidebar {
  // Since these use the SassScript-only modulo operator, they're parsed as
  // SassScript function calls.
  padding-left: max($padding % 10, 20px);
  padding-right: max($padding % 10, 20px);
}

       SpielplatzSass-Syntax$padding: 12px

.post
  // Since these max() calls are valid calculation expressions, they're
  // parsed as calculations.
  padding-left: max($padding, env(safe-area-inset-left))
  padding-right: max($padding, env(safe-area-inset-right))


.sidebar
  // Since these use the SassScript-only modulo operator, they're parsed as
  // SassScript function calls.
  padding-left: max($padding % 10, 20px)
  padding-right: max($padding % 10, 20px)

CSS-Ausgabe.post {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

.sidebar {
  padding-left: 20px;
  padding-right: 20px;
}

`round()`round() Permalink

Dart Sass: seit 1.65.0
LibSass: ✗
Ruby Sass: ✗

LibSass, Ruby Sass und Versionen von Dart Sass vor 1.65.0 sowie Dart Sass 1.66.x parsen round() immer als Sass-Funktion. Um eine einfache CSS-Funktion für diese Implementierungen zu verwenden, können Sie stattdessen etwas wie round(#{$strategy, $number, $step}) schreiben.

Die Funktion round(<strategy>, number, step) akzeptiert eine optionale Rundungsstrategie, einen zu rundenden Wert und ein Rundungsintervall step. strategy sollte nearest, up, down oder to-zero sein.

  SCSS

  Sass

  CSS

       SpielplatzSCSS-Syntax$number: 12.5px;
$step: 15px;

.post-image {
  // Since these round() calls are valid calculation expressions, they're
  // parsed as calculations.
  padding-left: round(nearest, $number, $step);
  padding-right: round($number + 10px);
  padding-bottom: round($number + 10px, $step + 10%);
}

       SpielplatzSass-Syntax$number: 12.5px
$step: 15px

.post-image
  // Since these round() calls are valid calculation expressions, they're
  // parsed as calculations.
  padding-left: round(nearest, $number, $step)
  padding-right: round($number + 10px)
  padding-bottom: round($number + 10px, $step + 10%)

CSS-Ausgabe.post-image {
  padding-left: 15px;
  padding-right: 23px;
  padding-bottom: round(22.5px, 15px + 10%);
}

`abs()`abs() Permalink

Dart Sass: seit 1.67.0
LibSass: ✗
Ruby Sass: ✗

LibSass, Ruby Sass und Versionen von Dart Sass vor 1.67.0 parsen abs() immer als Sass-Funktion. Um eine einfache CSS-Berechnung für diese Implementierungen zu erstellen, können Sie stattdessen etwas wie abs(#{$number}) schreiben.

⚠️ Vorsicht!

Die globale abs()-Funktion ist in Bezug auf die Kompatibilität mit %-Einheitsparametern veraltet. Zukünftig wird dies eine CSS abs()-Funktion ausgeben, die vom Browser aufgelöst werden soll.

Die Funktion abs(value) nimmt einen einzelnen Ausdruck als Parameter und gibt den Absolutwert von $value zurück. Wenn $value negativ ist, gibt dies -$value zurück, und wenn $value positiv ist, gibt es $value unverändert zurück.

  SCSS

  Sass

  CSS

       SpielplatzSCSS-Syntax.post-image {
  // Since these abs() calls are valid calculation expressions, they're
  // parsed as calculations.
  padding-left: abs(10px);
  padding-right: math.abs(-7.5%);
  padding-top: abs(1 + 1px);
}

       SpielplatzSass-Syntax.post-image
  // Since these abs() calls are valid calculation expressions, they're
  // parsed as calculations.
  padding-left: abs(-10px)
  padding-right: math.abs(-7.5%)
  padding-top: abs(1 + 1px)

CSS-Ausgabe.post-image {
  padding-left: 10px;
  padding-right: 7.5%;
  padding-top: 2px;
}

Berechnungen

SCSS-Syntax

Sass-Syntax

💡 Lustige Tatsache

VereinfachungVereinfachung Permalink

⚠️ Vorsicht!

SCSS-Syntax

Sass-Syntax

CSS-Ausgabe

OperationenOperationen Permalink

SCSS-Syntax

Sass-Syntax

KonstantenKonstanten Permalink

SCSS-Syntax

Sass-Syntax

SCSS-Syntax

Sass-Syntax

BerechnungsfunktionenBerechnungsfunktionen Permalink

💡 Lustige Tatsache

Veraltete globale FunktionenVeraltete globale Funktionen Permalink

⚠️ Vorsicht!

min() und max()min() und max() Permalink

SCSS-Syntax

Sass-Syntax

CSS-Ausgabe

round()round() Permalink

SCSS-Syntax

Sass-Syntax

CSS-Ausgabe

abs()abs() Permalink

⚠️ Vorsicht!

SCSS-Syntax

Sass-Syntax

CSS-Ausgabe

`min()` und `max()`min() und max() Permalink

`round()`round() Permalink

`abs()`abs() Permalink