在sass中如何正确的给定义的数字类型添加单位,如px

在 Sass 中,数字类型包括了长度、持续时间、频率、角度以及无单位数值等等。Sass 允许在运行中计算这些度量值。

在 Sass 中最常见的差错,是简单地认为单位仅仅字符串,认为它会被安全的添加到数字后边。这虽然听起来不错,但却不是单位正确的解析方法。能够把单位认为是代数符号,例如,在实际国际中,5 英寸乘以 5 英寸得到 25 英寸。Sass 也适用这样的逻辑。

将一个单位添加给数字的时分,实际上是让该数值乘以1个单位

$value: 42;
​
// Yep
$length: $value * 1px;
​
// Nope
$length: $value + px;

需要注意的是加上一个 0unit 也可以正确解析,但是这种方式在某种程度上会造成一些混乱,所以我更愿意推荐上面的方式。事实上,将一个数字转换为其他兼容单位时,加 0 操作并不会造成错误。

$value: 42 + 0px;
// -> 42px
​
$value: 1in + 0px;
// -> 1in
​
$value: 0px + 1in;
// -> 96px

这一切最终取决于你想要达到怎样的效果。只要记住,像添加一个字符串一样添加一个单位并不是一种好的处理方式。

要删除一个值的单位,你需要除以相同类型的 1 单位

$length: 42px;
​
// Yep
$value: $length / 1px;
​
// Nope
$value: str-slice($length + unquote(''), 1, 2);

给一个数值以字符串形式添加单位的结果是产生一个字符串,同时要防止对数据的额外操作。从一个带有单位的数值中分离数字部分也会产生字符串,但这些都不是你想要的。

© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容