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.
- Tech Tricks answered 2 years ago
- You must login to post comments
Your Answer
Please login first to submit.