When converting a unitless number to a length, duration, angle or whatever, people tend to simply append the unit as a string, like this:
$value: 42;
$length: $value + px;
// 42px
While this method works, it is far from ideal because it results in implicitly casting the initial value as a string. Indeed, if you try doing math with the $length
value from now on, you’ll see that Sass quickly throws an error because it cannot do math operators with a string.
To work around this issue, there are two ways of doing this properly:
$value: 42;
$length: $value + 0px;
// 42px
$value: 42;
$length: $value * 1px;
// 42px
Any of those methods will correctly produce a number as expected and not a string.
I use the last method, and it works fine.
Multiplication is a far more complicated operation for a computer to do that addition. So always use the first one.
agreed
It’s not far more complicated. Addition is linear and multiplication is not far from that. For such small number it’s just one cycle anyway, so it really does not matter.
$value:1px;
$value:2px;
$value3:$value1+$value2; // 1px2px
Isn’t what you were expecting?
This is out of the scope as they were trying to add an number to its unit!