Csík egység működése - CSS-trükkök

Anonim

Sok zavar van az egységek Sass-ban való működése körül. Mégis pontosan úgy működnek, mint a való életben. Ha el akarja távolítani az értékegységet, el kell osztania 1 egységgel. Például a (z) cmegység eltávolításához 42cmfel kell osztani 1cm. Pontosan ugyanúgy működik Sassban.

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

De mi van, ha nem ismeri a használt egységet? Tegyük fel, hogy bármi lehet, a képpontoktól kezdve emvagy akár vwés ch. Ezután el kell vonnunk a logikát egy függvényben:

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

A számítás furcsának tűnhet, de van értelme. Annak érdekében, hogy 1a mértékegysége legyen $number, szorzhatunk $number, 0majd összeadhatunk 1.

Használat

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