Zahlen

Zahlen in Sass bestehen aus zwei Komponenten: der Zahl selbst und ihren Einheiten. Zum Beispiel ist in 16px die Zahl 16 und die Einheit px. Zahlen können keine Einheiten haben und sie können komplexe Einheiten haben. Siehe Einheiten unten für weitere Details.

Spielplatz

SCSS-Syntax

@debug 100; // 100
@debug 0.8; // 0.8
@debug 16px; // 16px
@debug 5px * 2px; // 10px*px (read "square pixels")
Spielplatz

Sass-Syntax

@debug 100  // 100
@debug 0.8  // 0.8
@debug 16px  // 16px
@debug 5px * 2px  // 10px*px (read "square pixels")

Sass-Zahlen unterstützen die gleichen Formate wie CSS-Zahlen, einschließlich wissenschaftlicher Notation, die mit einem e zwischen der Zahl und ihrer Zehnerpotenz geschrieben wird. Da die Unterstützung für wissenschaftliche Notation in Browsern historisch lückenhaft war, kompiliert Sass sie immer zu vollständig erweiterten Zahlen.

Spielplatz

SCSS-Syntax

@debug 5.2e3; // 5200
@debug 6e-2; // 0.06
Spielplatz

Sass-Syntax

@debug 5.2e3  // 5200
@debug 6e-2  // 0.06

⚠️ Vorsicht!

Sass unterscheidet nicht zwischen ganzen Zahlen und Dezimalzahlen. Zum Beispiel gibt math.div(5, 2) 2.5 anstelle von 2 zurück. Dieses Verhalten ist dasselbe wie in JavaScript, unterscheidet sich aber von vielen anderen Programmier sprachen.

EinheitenEinheiten Permalink

Sass bietet leistungsstarke Unterstützung für die Manipulation von Einheiten, basierend darauf, wie Einheitenberechnungen in der realen Welt funktionieren. Wenn zwei Zahlen multipliziert werden, werden auch ihre Einheiten multipliziert. Wenn eine Zahl durch eine andere geteilt wird, nimmt das Ergebnis die Zähler-Einheiten der ersten Zahl und die Nenner-Einheiten der zweiten Zahl an. Eine Zahl kann beliebig viele Einheiten im Zähler und/oder Nenner haben.

Spielplatz

SCSS-Syntax

@use 'sass:math';

@debug 4px * 6px; // 24px*px (read "square pixels")
@debug math.div(5px, 2s); // 2.5px/s (read "pixels per second")

// 3.125px*deg/s*em (read "pixel-degrees per second-em")
@debug 5px * math.div(math.div(30deg, 2s), 24em);

$degrees-per-second: math.div(20deg, 1s);
@debug $degrees-per-second; // 20deg/s
@debug math.div(1, $degrees-per-second); // 0.05s/deg
Spielplatz

Sass-Syntax

@use 'sass:math'

@debug 4px * 6px  // 24px*px (read "square pixels")
@debug math.div(5px, 2s)  // 2.5px/s (read "pixels per second")

// 3.125px*deg/s*em (read "pixel-degrees per second-em")
@debug 5px * math.div(math.div(30deg, 2s), 24em)

$degrees-per-second: math.div(20deg, 1s)
@debug $degrees-per-second  // 20deg/s
@debug math.div(1, $degrees-per-second)  // 0.05s/deg

⚠️ Vorsicht!

Da CSS keine komplexen Einheiten wie Quadratpixel unterstützt, führt die Verwendung einer Zahl mit komplexen Einheiten als Eigenschaftswert zu einem Fehler. Dies ist jedoch eine versteckte Funktion; Wenn Sie nicht die richtige Einheit erhalten, bedeutet dies normalerweise, dass mit Ihren Berechnungen etwas nicht stimmt! Und denken Sie daran, Sie können jederzeit die @debug Regel verwenden, um die Einheiten einer Variablen oder eines beliebigen Ausdrucks zu überprüfen.

Sass konvertiert automatisch zwischen kompatiblen Einheiten, wobei die Einheit, die für das Ergebnis gewählt wird, von der verwendeten Sass-Implementierung abhängt. Wenn Sie versuchen, inkompatible Einheiten zu kombinieren, wie z. B. 1in + 1em, löst Sass einen Fehler aus.

Spielplatz

SCSS-Syntax

// CSS defines one inch as 96 pixels.
@debug 1in + 6px; // 102px or 1.0625in

@debug 1in + 1s;
//     ^^^^^^^^
// Error: Incompatible units s and in.
Spielplatz

Sass-Syntax

// CSS defines one inch as 96 pixels.
@debug 1in + 6px  // 102px or 1.0625in

@debug 1in + 1s
//     ^^^^^^^^
// Error: Incompatible units s and in.

Wie bei realen Einheitenberechnungen werden, wenn der Zähler Einheiten enthält, die mit Einheiten im Nenner kompatibel sind (wie math.div(96px, 1in)), diese aufgehoben. Dies erleichtert die Definition eines Verhältnisses, das Sie zur Umrechnung zwischen Einheiten verwenden können. Im folgenden Beispiel legen wir die gewünschte Geschwindigkeit auf eine Sekunde pro 50 Pixel fest und multiplizieren diese dann mit der Anzahl der Pixel, die der Übergang abdeckt, um die benötigte Zeit zu ermitteln zu dauern.

Spielplatz

SCSS-Syntax

@use 'sass:math';

$transition-speed: math.div(1s, 50px);

@mixin move($left-start, $left-stop) {
  position: absolute;
  left: $left-start;
  transition: left ($left-stop - $left-start) * $transition-speed;

  &:hover {
    left: $left-stop;
  }
}

.slider {
  @include move(10px, 120px);
}
Spielplatz

Sass-Syntax

@use 'sass:math'

$transition-speed: math.div(1s, 50px)

@mixin move($left-start, $left-stop)
  position: absolute
  left: $left-start
  transition: left ($left-stop - $left-start) * $transition-speed

  &:hover
    left: $left-stop



.slider
  @include move(10px, 120px)

CSS-Ausgabe

.slider {
  position: absolute;
  left: 10px;
  transition: left 2.2s;
}
.slider:hover {
  left: 120px;
}

⚠️ Vorsicht!

Wenn Ihre Arithmetik die falsche Einheit ergibt, müssen Sie wahrscheinlich Ihre Berechnungen überprüfen. Möglicherweise vergessen Sie Einheiten für eine Menge, die sie haben sollte! Einheitenbereinigt zu bleiben, ermöglicht es Sass, Ihnen hilfreiche Fehlermeldungen zu geben, wenn etwas nicht stimmt.

Sie sollten insbesondere die Verwendung von Interpolation wie #{$number}px vermeiden. Dies erstellt keine Zahl! Es erstellt einen unquoted String, der wie eine Zahl *aussieht*, aber nicht mit numerischen Operationen oder Funktionen funktioniert. Versuchen Sie, Ihre Berechnungen einheitenbereinigt zu halten, sodass $number bereits die Einheit px hat, oder schreiben Sie $number * 1px.

⚠️ Vorsicht!

Prozentangaben in Sass funktionieren wie jede andere Einheit. Sie sind *nicht* mit Dezimalzahlen austauschbar, da in CSS Dezimalzahlen und Prozentangaben unterschiedliche Bedeutungen haben. Zum Beispiel ist 50% eine Zahl mit % als ihrer Einheit, und Sass betrachtet sie als anders als die Zahl 0.5.

Sie können zwischen Dezimalzahlen und Prozentangaben mit Einheitenarithmetik konvertieren. math.div($percentage, 100%) gibt die entsprechende Dezimalzahl zurück, und $decimal * 100% gibt die entsprechende Prozentangabe zurück. Sie können auch die math.percentage() Funktion als explizitere Schreibweise für $decimal * 100% verwenden.

GenauigkeitGenauigkeit Permalink

Kompatibilität (10-stelliger Standard)
Dart Sass
✓
LibSass
✗
Ruby Sass
seit 3.5.0

LibSass und ältere Versionen von Ruby Sass verwenden standardmäßig 5 Stellen numerischer Genauigkeit, können aber so konfiguriert werden, dass sie eine andere Anzahl verwenden. Es wird empfohlen, dass Benutzer sie für 10 Stellen für höhere Genauigkeit und zukünftige Kompatibilität konfigurieren.

Sass-Zahlen werden intern als 64-Bit-Gleitkommazahlen dargestellt. Sie unterstützen bis zu 10 Stellen Genauigkeit nach dem Dezimalpunkt bei der Serialisierung nach CSS und für Gleichheitsprüfungen. Das bedeutet verschiedene Dinge:

  • Nur die ersten zehn Stellen einer Zahl nach dem Dezimalpunkt werden in das generierte CSS aufgenommen.

  • Operationen wie == und >= betrachten zwei Zahlen als gleich, wenn sie bis zur zehnten Stelle nach dem Dezimalpunkt identisch sind sind.

  • Wenn eine Zahl weniger als 0.0000000001 von einer ganzen Zahl entfernt ist, wird sie für Funktionen wie list.nth(), die ganzzahlige Argumente erfordern, als ganze Zahl betrachtet.

Spielplatz

SCSS-Syntax

@debug 0.012345678912345; // 0.0123456789
@debug 0.01234567891 == 0.01234567899; // true
@debug 1.00000000009; // 1
@debug 0.99999999991; // 1
Spielplatz

Sass-Syntax

@debug 0.012345678912345  // 0.0123456789
@debug 0.01234567891 == 0.01234567899  // true
@debug 1.00000000009  // 1
@debug 0.99999999991  // 1

💡 Lustige Tatsache

Zahlen werden *lazy* auf 10 Stellen Genauigkeit gerundet, wenn sie an einer Stelle verwendet werden, an der Genauigkeit relevant ist. Das bedeutet, dass mathematische Funktionen intern mit dem vollständigen Zahlenwert arbeiten, um zusätzliche Rundungs fehler zu vermeiden.