Funkcja zespołu pasków - CSS-Tricks

Anonim

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ąć cmjednostkę 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 emlub nawet vwi 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ć 1jednostkę o $number, możemy pomnożyć $numberprzez, 0a następnie dodać 1.

Stosowanie

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