Функція смугового блоку - CSS-хитрощі

Anonim

У роботі підрозділів у Сассі багато плутанини. Проте вони працюють так само, як і в реальному житті. Якщо ви хочете вилучити одиницю виміру, вам потрібно розділити її на 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