Sloksnes vienības funkcija - CSS-triki

Anonim

Par vienību darbību Sassā ir daudz neskaidrību. Tomēr viņi strādā tieši tāpat kā reālajā dzīvē. Ja vēlaties noņemt vērtības vienību, tā jāsadala ar 1 vienību. Piemēram, lai noņemtu cmvienību 42cm, jums tas jāsadala ar 1cm. Tas darbojas tieši tāpat Sass.

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

Bet ko darīt, ja nezināt izmantoto vienību? Pieņemsim, ka tas varētu būt jebkas, sākot no pikseļiem emvai pat vwun ch. Tad mums ir jāapkopo loģika funkcijā:

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

Aprēķins varētu izskatīties dīvaini, bet tam ir jēga. Lai 1iegūtu vienību $number, mēs varam reizināt $numberar 0un pēc tam pievienot 1.

Lietošana

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