Функция полоски - 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