Funkcia pásovej jednotky - Triky CSS

Anonim

Spôsob, akým jednotky pracujú v Sass, je veľa zmätený. Napriek tomu fungujú presne tak, ako v skutočnom živote. Ak chcete odstrániť jednotku hodnoty, musíte ju vydeliť 1 jednotkou. Napríklad, ak chcete cmjednotku odobrať 42cm, musíte ju vydeliť 1cm. U Sassa to funguje úplne rovnako.

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

Čo však v prípade, že nepoznáte používanú jednotku? Povedzme, že to môže byť čokoľvek, od pixelov po emalebo dokonca vwa ch. Potom potrebujeme abstrahovať logiku vo funkcii:

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

Výpočet môže vyzerať zvláštne, ale má skutočne zmysel. Aby bolo možné mať 1z jednotky $number, môžeme násobiť $numbertým, 0a potom pridať 1.

Využitie

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