Hay mucha confusión en torno a la forma en que funcionan las unidades en Sass. Sin embargo, funcionan exactamente como lo hacen en la vida real. Si desea eliminar la unidad de valor, debe dividirla por 1 unidad. Por ejemplo, para eliminar la cm
unidad de 42cm
, debes dividirla por 1cm
. Funciona exactamente igual en Sass.
$length: 42px; $value: $length / 1px; // -> 42
Pero, ¿y si no conoce la unidad en uso? Digamos que podría ser cualquier cosa, desde píxeles hasta em
o incluso vw
y ch
. Entonces necesitamos abstraer la lógica en una función:
/// 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; )
El cálculo puede parecer extraño, pero en realidad tiene sentido. Para obtener 1
la unidad de $number
, podemos multiplicar $number
por 0
y luego sumar 1
.
Uso
$length: 42px; $value: strip-unit($length); // -> 42