Juostelės vieneto funkcija - CSS-gudrybės

Anonim

Dėl vienetų darbo Sass mieste kyla daug painiavos. Vis dėlto jie dirba tiksliai taip, kaip ir realiame gyvenime. Jei norite pašalinti vertės vienetą, turite jį padalyti iš 1 vieneto. Pavyzdžiui, norėdami pašalinti cmvienetą 42cm, turite jį padalyti iš 1cm. Lygiai taip pat veikia ir „Sass“.

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

Bet ką daryti, jei nežinote naudojamo įrenginio? Tarkime, tai gali būti bet kas, pradedant pikseliais emir net vwir ch. Tada mes turime abstrakčiai logikuoti funkcijoje:

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

Skaičiavimas gali atrodyti keistas, bet iš tikrųjų yra prasmingas. Kad gautume 1vienetą $number, galime padauginti $numberiš to 0ir pridėti 1.

Naudojimas

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