Função strip-unit - CSS-Tricks

Anonim

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 cmunidade 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 emou mesmo vwe 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 1a unidade de $number, podemos multiplicar $numberpor 0e adicionar 1.

Uso

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