Fonction Strip-unit - Astuces CSS

Anonim

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' cmunité 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 à emou même vwet 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 1de l'unité de $number, nous pouvons multiplier $numberpar 0puis additionner 1.

Usage

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