Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Sass Numerische Operatoren | Präprozessoren
Fortgeschrittene CSS-Techniken

book
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
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
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
$defaultMargin: 30px;

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

Wählen Sie die richtige Aussage aus.

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 7. Kapitel 4

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

some-alt