Strip-enhetsfunktion - CSS-tricks

Anonim

Det är mycket förvirring kring hur enheter fungerar i Sass. Ändå fungerar de precis som de gör i verkliga livet. Om du vill ta bort värdenheten måste du dela den med 1 enhet. För att till exempel ta bort cmenheten av 42cmmåste du dela den med 1cm. Det fungerar exakt detsamma i Sass.

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

Men tänk om du inte känner till enheten som används? Låt oss säga att det kan vara vad som helst, från pixlar till emeller till vwoch med ch. Då måste vi abstrahera logiken i en funktion:

/// 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; )

Beräkningen kan se udda ut men det är faktiskt vettigt. För att få 1enheten av $numberkan vi multiplicera $numbermed 0och sedan lägga till 1.

Användande

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