Einheit korrekt zur Zahl hinzufügen - CSS-Tricks

Anonim

Wenn Sie eine Zahl ohne Einheit in eine Länge, Dauer, einen Winkel oder was auch immer konvertieren, wird die Einheit in der Regel einfach als Zeichenfolge angehängt:

$value: 42; $length: $value + px; // 42px

Diese Methode funktioniert zwar, ist jedoch alles andere als ideal, da der Anfangswert implizit als Zeichenfolge umgewandelt wird. Wenn Sie $lengthvon nun an versuchen, mit dem Wert zu rechnen, werden Sie feststellen, dass Sass schnell einen Fehler auslöst, da er keine mathematischen Operatoren mit einer Zeichenfolge ausführen kann.

Um dieses Problem zu umgehen, gibt es zwei Möglichkeiten, dies richtig zu tun:

$value: 42; $length: $value + 0px; // 42px
$value: 42; $length: $value * 1px; // 42px

Jede dieser Methoden erzeugt wie erwartet korrekt eine Zahl und keine Zeichenfolge.