Traka-jedinica Funkcija - CSS-trikovi

Anonim

Postoji velika zbrka oko načina rada jedinica u Sassu. Ipak, rade točno onako kako rade u stvarnom životu. Ako želite ukloniti jedinicu vrijednosti, morate je podijeliti s 1 jedinicom. Na primjer, da biste uklonili cmjedinicu 42cm, morate je podijeliti sa 1cm. Potpuno isto djeluje u Sassu.

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

Ali što ako ne znate jedinicu koja se koristi? Recimo da to može biti bilo što, od piksela do emili čak vwi ch. Tada moramo apstrahirati logiku u funkciji:

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

Izračun može izgledati čudno, ali zapravo ima smisla. Kako bi se 1jedinice $number, možemo pomnožiti $numberstrane 0, a zatim dodati 1.

Upotreba

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