正确地将单位添加到数字

Avatar of Kitty Giraudel
Kitty Giraudel

当将无单位的数字转换为长度、持续时间、角度或其他值时,人们倾向于简单地将单位作为字符串附加,如下所示

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

虽然这种方法有效,但它远非理想,因为它会导致隐式将初始值转换为字符串。事实上,如果你尝试从现在开始对 $length 值进行数学运算,你会发现 Sass 会很快抛出错误,因为它无法对字符串进行数学运算符。

为了解决这个问题,有两种正确的方法

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

任何一种方法都会正确地生成预期中的数字,而不是字符串。