Ribaseadme funktsioon - CSS-trikid

Anonim

Üksuste töö Sassis on palju segadust. Ometi töötavad nad täpselt nii nagu päriselus. Kui soovite väärtuse ühiku eemaldada, peate selle jagama 1 ühikuga. Näiteks cmüksuse eemaldamiseks 42cmpeate selle jagama 1cm. Täpselt samamoodi töötab see Sassis.

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

Aga mis siis, kui te ei tea kasutatavat seadet? Oletame, et see võib olla mis tahes, alates pikslitest kuni emvõi isegi vwja ch. Siis peame funktsiooni loogika abstraktseks tegema:

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

Arvestus võib tunduda veider, kuid see on tegelikult mõttekas. Selleks, et 1üksuse kohta $number, saame korrutada $numberpoolt 0ja seejärel lisada 1.

Kasutamine

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