Istnieje wiele nieporozumień związanych z działaniem jednostek w Sass. Jednak działają dokładnie tak, jak w prawdziwym życiu. Jeśli chcesz usunąć jednostkę wartości, musisz ją podzielić przez 1 jednostkę. Na przykład, aby usunąć cm
jednostkę 42cm
, musisz ją podzielić przez 1cm
. W Sass działa dokładnie tak samo.
$length: 42px; $value: $length / 1px; // -> 42
Ale co, jeśli nie znasz używanej jednostki? Powiedzmy, że może to być cokolwiek, od pikseli do em
lub nawet vw
i ch
. Następnie musimy wyodrębnić logikę w funkcji:
/// 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; )
Obliczenie może wyglądać dziwnie, ale w rzeczywistości ma sens. Aby otrzymać 1
jednostkę o $number
, możemy pomnożyć $number
przez, 0
a następnie dodać 1
.
Stosowanie
$length: 42px; $value: strip-unit($length); // -> 42