Funcția de bandă - CSS-Tricks

Anonim

Există o mulțime de confuzie în legătură cu modul în care unitățile funcționează în Sass. Cu toate acestea, funcționează exact așa cum fac în viața reală. Dacă doriți să eliminați unitatea de valoare, trebuie să o împărțiți cu 1 unitate. De exemplu, pentru a elimina cmunitatea de 42cm, trebuie să o împărțiți 1cm. Funcționează exact la fel în Sass.

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

Dar dacă nu cunoașteți unitatea utilizată? Să empresupunem că ar putea fi orice, de la pixeli la sau chiar vwși ch. Atunci trebuie să abstractizăm logica într-o funcție:

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

Calculul ar putea părea ciudat, dar are sens. Pentru a avea 1unitatea de $number, putem înmulți $numbercu 0și apoi adăuga 1.

Utilizare

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