Funkcija enote traku - CSS-triki

Anonim

V načinu delovanja enot v Sassu je veliko zmede. Vendar delajo natanko tako kot v resničnem življenju. Če želite odstraniti enoto vrednosti, jo morate razdeliti na 1 enoto. Če želite na primer odstraniti cmenoto 42cm, jo morate deliti z 1cm. Popolnoma enako deluje v Sassu.

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

Kaj pa, če enote v uporabi ne poznate? Recimo, da je lahko karkoli, od slikovnih pik do emali celo vwin ch. Potem moramo logiko v funkciji abstrahirati:

/// 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 je lahko čuden, vendar je dejansko smiseln. Če želimo imeti 1enoto $number, lahko pomnožimo $numberz 0in nato seštejemo 1.

Uporaba

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