Strip-enhet Funksjon - CSS-triks

Anonim

Det er mye forvirring rundt måten enheter fungerer i Sass på. Likevel fungerer de akkurat som de gjør i det virkelige liv. Hvis du vil fjerne verdienheten, må du dele den med 1 enhet. For eksempel, for å fjerne cmenheten av 42cm, må du dele den med 1cm. Det fungerer nøyaktig det samme i Sass.

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

Men hva om du ikke kjenner enheten som er i bruk? La oss si det kan være hva som helst, fra piksler til emeller til vwog med og ch. Da må vi trekke ut logikken i en funksjon:

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

Beregningen kan se rart ut, men det er faktisk fornuftig. For å ha 1av enheten av $number, kan vi multiplisere $numbermed 0og deretter legge til 1.

Bruk

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