Suma correcta de unidades a números | Programar Plus

Al convertir un número sin unidades en una longitud, duración, ángulo o lo que sea, las personas tienden simplemente a agregar la unidad como una cadena, como esta:

$value: 42;
$length: $value + px;
// 42px

Si bien este método funciona, está lejos de ser ideal porque da como resultado convertir implícitamente el valor inicial como una cadena. De hecho, si intentas hacer matemáticas con el $length de ahora en adelante, verá que Sass arroja rápidamente un error porque no puede hacer operadores matemáticos con una cadena.

Para solucionar este problema, hay dos formas de hacerlo correctamente:

$value: 42;
$length: $value + 0px;
// 42px

$value: 42;
$length: $value * 1px;
// 42px

Cualquiera de esos métodos producirá correctamente un número como se esperaba y no una cadena.