Il y a beaucoup de confusion autour du fonctionnement des unités à Sass. Pourtant, ils fonctionnent exactement comme ils le font dans la vraie vie. Si vous souhaitez supprimer l'unité de valeur, vous devez la diviser par 1 unité. Par exemple, pour supprimer l' cm
unité de 42cm
, vous devez la diviser par 1cm
. Cela fonctionne exactement de la même manière dans Sass.
$length: 42px; $value: $length / 1px; // -> 42
Mais que faire si vous ne connaissez pas l'unité utilisée? Disons que cela peut être n'importe quoi, des pixels à em
ou même vw
et ch
. Ensuite, nous devons faire abstraction de la logique dans une fonction:
/// 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; )
Le calcul peut sembler étrange, mais il a du sens. Afin d'avoir 1
de l'unité de $number
, nous pouvons multiplier $number
par 0
puis additionner 1
.
Usage
$length: 42px; $value: strip-unit($length); // -> 42