Strip-Unit-Funktion - CSS-Tricks

Anonim

Es gibt viel Verwirrung darüber, wie Einheiten in Sass arbeiten. Sie arbeiten jedoch genauso wie im wirklichen Leben. Wenn Sie die Werteinheit entfernen möchten, müssen Sie sie durch 1 Einheit teilen. Um beispielsweise die cmEinheit von zu entfernen 42cm, müssen Sie sie durch dividieren 1cm. In Sass funktioniert es genauso.

$length: 42px; $value: $length / 1px; // -> 42

Aber was ist, wenn Sie das verwendete Gerät nicht kennen? Nehmen wir an, es könnte alles sein, von Pixeln bis emoder sogar vwund ch. Dann müssen wir die Logik in einer Funktion abstrahieren:

/// Remove the unit of a length /// @param (Number) $number - Number to remove unit from /// @return (Number) - Unitless number @function strip-unit($number) ( @if type-of($number) == 'number' and not unitless($number) ( @return $number / ($number * 0 + 1); ) @return $number; )

Die Berechnung mag seltsam aussehen, macht aber tatsächlich Sinn. Um zu haben , 1der Einheit $number, können wir mehrfach $numberdurch 0und fügen Sie dann 1.

Verwendung

$length: 42px; $value: strip-unit($length); // -> 42