Sumar correctamente la unidad al número - Trucos CSS

Al convertir un número sin unidades a una longitud, duración, ángulo o lo que sea, la gente tiende a agregar la unidad simplemente como una cadena, así:

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

Si bien este método funciona, está lejos de ser ideal porque resulta en convertir implícitamente el valor inicial como una cadena. De hecho, si intenta hacer cálculos matemáticos con el $lengthvalor 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.