Numerische Operatoren

Sass unterstützt den Standardumfang mathematischer Operatoren für Zahlen. Sie konvertieren automatisch zwischen kompatiblen Einheiten.

  • <Ausdruck> + <Ausdruck> addiert den Wert des ersten Ausdrucks zum zweiten.
  • <Ausdruck> - <Ausdruck> subtrahiert den Wert des ersten Ausdrucks vom zweiten.
  • <Ausdruck> * <Ausdruck> multipliziert den Wert des ersten Ausdrucks mit dem zweiten.
  • <Ausdruck> % <Ausdruck> gibt den Rest der Division des ersten Ausdrucks durch den zweiten zurück. Dies ist als Modulo Operator bekannt.
Spielplatz

SCSS-Syntax

@debug 10s + 15s; // 25s
@debug 1in - 10px; // 0.8958333333in
@debug 5px * 3px; // 15px*px
@debug 1in % 9px; // 0.0625in
Spielplatz

Sass-Syntax

@debug 10s + 15s  // 25s
@debug 1in - 10px  // 0.8958333333in
@debug 5px * 3px  // 15px*px
@debug 1in % 9px  // 0.0625in

Einheitenlose Zahlen können mit Zahlen beliebiger Einheit verwendet werden.

Spielplatz

SCSS-Syntax

@debug 100px + 50; // 150px
@debug 4s * 10; // 40s
Spielplatz

Sass-Syntax

@debug 100px + 50  // 150px
@debug 4s * 10  // 40s

Zahlen mit inkompatiblen Einheiten können nicht für Addition, Subtraktion oder Modulo verwendet werden.

Spielplatz

SCSS-Syntax

@debug 100px + 10s;
//     ^^^^^^^^^^^
// Error: Incompatible units px and s.
Spielplatz

Sass-Syntax

@debug 100px + 10s
//     ^^^^^^^^^^^
// Error: Incompatible units px and s.

Unäre OperatorenUnary Operators permalink

Sie können + und - auch als unäre Operatoren schreiben, die nur einen Wert annehmen

  • +<Ausdruck> gibt den Wert des Ausdrucks zurück, ohne ihn zu verändern.
  • -<Ausdruck> gibt die negative Version des Wertes des Ausdrucks zurück.
Spielplatz

SCSS-Syntax

@debug +(5s + 7s); // 12s
@debug -(50px + 30px); // -80px
@debug -(10px - 15px); // 5px
Spielplatz

Sass-Syntax

@debug +(5s + 7s)  // 12s
@debug -(50px + 30px)  // -80px
@debug -(10px - 15px)  // 5px

⚠️ Vorsicht!

Da - sowohl für Subtraktion als auch für unäre Negation stehen kann, kann es verwirrend sein, welche Bedeutung es in einer durch Leerzeichen getrennten Liste hat. Um sicherzugehen 

  • Schreiben Sie immer Leerzeichen auf beiden Seiten von -, wenn Sie subtrahieren.
  • Schreiben Sie ein Leerzeichen vor -, aber kein danach, für eine negative Zahl oder eine unäre Negation.
  • Fassen Sie eine unäre Negation in Klammern, wenn sie sich in einer durch Leerzeichen getrennten Liste befindet.

Die verschiedenen Bedeutungen von - in Sass haben in folgender Reihenfolge Vorrang

  1. - als Teil eines Bezeichners. Die einzige Ausnahme sind Einheiten; Sass erlaubt normalerweise jeden gültigen Bezeichner als Bezeichner, aber Einheiten dürfen keinen Bindestrich gefolgt von einer Ziffer enthalten.
  2. - zwischen einem Ausdruck und einer numerischen Konstante ohne Leerzeichen, was als Subtraktion interpretiert wird.
  3. - am Anfang einer numerischen Konstante, was als negative Zahl interpretiert wird.
  4. - zwischen zwei Zahlen unabhängig von Leerzeichen, was als Subtraktion interpretiert wird.
  5. - vor einem Wert, der keine numerische Konstante ist, was als unäre Negation interpretiert wird.
Spielplatz

SCSS-Syntax

@debug a-1; // a-1
@debug 5px-3px; // 2px
@debug 5-3; // 2
@debug 1 -2 3; // 1 -2 3

$number: 2;
@debug 1 -$number 3; // -1 3
@debug 1 (-$number) 3; // 1 -2 3
Spielplatz

Sass-Syntax

@debug a-1  // a-1
@debug 5px-3px  // 2px
@debug 5-3  // 2
@debug 1 -2 3  // 1 -2 3

$number: 2
@debug 1 -$number 3  // -1 3
@debug 1 (-$number) 3  // 1 -2 3

DivisionDivision permalink

Kompatibilität (math.div())
Dart Sass
seit 1.33.0
LibSass
✗
Ruby Sass
✗

Im Gegensatz zu anderen mathematischen Operationen erfolgt die Division in Sass über die Funktion math.div(). Obwohl viele Programmiersprachen / als Divisionsoperator verwenden, wird / in CSS als Trennzeichen verwendet (wie in font: 15px/32px oder hsl(120 100% 50% / 0.8)). Obwohl Sass die Verwendung von / als Divisionsoperator unterstützt, ist dies veraltet und wird in einer zukünftigen Version entfernt.

Schrägstrich-separierte WerteSlash-Separated Values permalink

Solange Sass / weiterhin als Divisionsoperator unterstützt, muss es eine Möglichkeit geben, zwischen / als Trennzeichen und / als Division zu unterscheiden. Damit dies funktioniert, wenn zwei Zahlen durch / getrennt sind, gibt Sass das Ergebnis als schrägstrichgetrennt aus, anstatt sie zu dividieren, es sei denn, eine der folgenden Bedingungen ist erfüllt

  • Jeder Ausdruck ist etwas anderes als eine numerische Konstante.
  • Das Ergebnis wird in einer Variablen gespeichert oder von einer Funktion zurückgegeben.
  • Die Operation ist von Klammern umschlossen, es sei denn, diese Klammern befinden sich außerhalb einer Liste, die die Operation enthält.
  • Das Ergebnis wird als Teil einer anderen Operation (außer /) verwendet.
  • Das Ergebnis wird von einer Berechnung zurückgegeben.

Sie können list.slash() verwenden, um / als Trennzeichen zu erzwingen.

Spielplatz

SCSS-Syntax

@use "sass:list";

@debug 15px / 30px; // 15px/30px
@debug (10px + 5px) / 30px; // 0.5
@debug list.slash(10px + 5px, 30px); // 15px/30px

$result: 15px / 30px;
@debug $result; // 0.5

@function fifteen-divided-by-thirty() {
  @return 15px / 30px;
}
@debug fifteen-divided-by-thirty(); // 0.5

@debug (15px/30px); // 0.5
@debug (bold 15px/30px sans-serif); // bold 15px/30px sans-serif
@debug 15px/30px + 1; // 1.5
Spielplatz

Sass-Syntax

@use "sass:list";

@debug 15px / 30px  // 15px/30px
@debug (10px + 5px) / 30px  // 0.5
@debug list.slash(10px + 5px, 30px)  // 15px/30px

$result: 15px / 30px
@debug $result  // 0.5

@function fifteen-divided-by-thirty()
  @return 15px / 30px

@debug fifteen-divided-by-thirty()  // 0.5

@debug (15px/30px)  // 0.5
@debug (bold 15px/30px sans-serif)  // bold 15px/30px sans-serif
@debug 15px/30px + 1  // 1.5

EinheitenUnits permalink

Sass bietet eine leistungsstarke Unterstützung für die Manipulation von Einheiten, basierend darauf, wie reale Einheitenberechnungen funktionieren. Wenn zwei Zahlen multipliziert werden, werden auch ihre Einheiten multipliziert. Wenn eine Zahl durch eine andere geteilt wird, übernimmt das Ergebnis die Einheiten des Zählers aus der ersten Zahl und die Einheiten des Nenners aus der zweiten. 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 etwas mit Ihren Berechnungen nicht stimmt! Und denken Sie daran, Sie können immer die @debug Regel verwenden, um die Einheiten einer Variablen oder eines Ausdrucks zu überprüfen.

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

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 heben sich, wenn der Zähler Einheiten enthält, die mit Einheiten im Nenner kompatibel sind (z. B. math.div(96px, 1in)), diese gegenseitig auf. Dies erleichtert die Definition eines Verhältnisses, das Sie zur Umrechnung zwischen Einheiten verwenden können. Im folgenden Beispiel setzen wir die gewünschte Geschwindigkeit auf eine Sekunde pro 50 Pixel und multiplizieren diese dann mit der Anzahl der Pixel, die der Übergang abdeckt, um die dafür benötigte Zeit zu erhalten.

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 lassen Sie Einheiten für eine Menge weg, die sie haben sollte! Wenn Sie Einheiten sauber halten, kann Sass Ihnen hilfreiche Fehler liefern, wenn etwas nicht stimmt.

Sie sollten insbesondere die Verwendung von Interpolation wie #{$number}px vermeiden. Dies erzeugt tatsächlich keine Zahl! Es erstellt eine nicht zitierte Zeichenkette, die wie eine Zahl *aussieht*, aber nicht mit numerischen Operationen oder Funktionen funktioniert. Versuchen Sie, Ihre Berechnungen einheitensauber zu gestalten, sodass $number bereits die Einheit px hat, oder schreiben Sie $number * 1px.

⚠️ Vorsicht!

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

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