Sass Numerische Operatoren

Wir können mathematische Berechnungen mit Zahlen durchführen. Sass unterstützt alle grundlegenden Arithmetiken wie Addition (+), Subtraktion (-), Multiplikation (*) und Division (/).

css
Code kopieren
Collapse
9
1
2
width: 100px + 10px; /* 110px */
height: 100% - 20%; /* 80% */

Für Addition und Subtraktion ist es wichtig, Werte mit denselben Einheiten zu haben (z.B. %, px).

css
Code kopieren
Collapse
9
1
2
animation-duration: 200ms * 3; /* 600ms */
flex-basis: 100% / 4; /* 25% */

Für Multiplikation und Division ist es entscheidend, einen wertlosen Wert zu haben. Sass kann die Division von Pixeln oder Prozenten nicht berechnen.

Mathematische Operationen mit Variablen

Wir können leicht Variablen in die Berechnungen einbeziehen, wenn die Variable einen gültigen Wert hat.

Stellen wir uns vor, dass wir einen doppelten Rand zum Element hinzufügen müssen:

css
Code kopieren
Collapse
9
1
2
3
4
5
$defaultMargin: 30px;

.item {
  margin: $defaultMargin * 2; /* Result is 60px */
}