Há muita confusão em torno da maneira como as unidades funcionam no Sass. No entanto, eles funcionam exatamente como na vida real. Se você quiser remover a unidade de valor, você deve dividi-la por 1 unidade. Por exemplo, para remover a cm
unidade de 42cm
, você deve dividi-la por 1cm
. Funciona exatamente da mesma forma no Sass.
$length: 42px; $value: $length / 1px; // -> 42
Mas e se você não souber a unidade em uso? Digamos que possa ser qualquer coisa, de pixels a em
ou mesmo vw
e ch
. Então, precisamos abstrair a lógica em uma função:
/// 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; )
O cálculo pode parecer estranho, mas realmente faz sentido. Para obter 1
a unidade de $number
, podemos multiplicar $number
por 0
e adicionar 1
.
Uso
$length: 42px; $value: strip-unit($length); // -> 42