Strip-unit Functie - CSS-trucs

Anonim

Er is veel verwarring over de manier waarop units in Sass werken. Toch werken ze precies zoals ze in het echte leven doen. Als je de waarde-eenheid wilt verwijderen, moet je deze delen door 1 eenheid. Om bijvoorbeeld de cmeenheid van te verwijderen 42cm, moet u deze delen door 1cm. Het werkt precies hetzelfde in Sass.

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

Maar wat als u het apparaat in gebruik niet kent? Laten we zeggen dat het van alles kan zijn, van pixels tot emof zelfs vwen ch. Dan moeten we de logica in een functie abstraheren:

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

De berekening ziet er misschien vreemd uit, maar is eigenlijk logisch. Om 1de eenheid van te hebben $number, kunnen we vermenigvuldigen $numbermet 0en dan optellen 1.

Gebruik

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