Функция на лентовата единица - CSS-трикове

Anonim

Има много объркване около начина, по който единиците работят в Sass. И все пак работят точно както в реалния живот. Ако искате да премахнете единицата за стойност, трябва да я разделите на 1 единица. Например, за да премахнете cmединицата на 42cm, трябва да я разделите на 1cm. Той работи по същия начин в Sass.

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

Но какво, ако не познавате използваната единица? Да предположим, че може да бъде всичко, от пиксели до emили дори vwи ch. След това трябва да абстрахираме логиката във функция:

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

Изчислението може да изглежда странно, но всъщност има смисъл. За да имаме 1единица от $number, можем да умножим $numberпо 0и след това да добавим 1.

Употреба

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