Función de unidad de tira - Trucos CSS

Anonim

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 cmunidad 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 emo incluso vwy 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 1la unidad de $number, podemos multiplicar $numberpor 0y luego sumar 1.

Uso

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