LESS 中 calc() 运算单位混合陷阱：为什么 (100% - 40px) / 4 结果会变成 15%？

less 中单位混合运算的陷阱：为什么 calc((100% - 40px) / 4) 计算结果偏差？

在 LESS 中使用带单位混合的 calc() 运算时，可能会遇到 unexpected 的结果。本文将探究为什么 calc((100% - 40px) / 4) 在特定环境下会计算为 calc(15%)，并提供修复方法。

问题

“

正式环境是正常的，但是测试环境总会计算为15%

”

答案

在 LESS 中，calc(100% - 40px) 等带有混合单位的运算会被解析器忽略单位，全部按照百分比计算。因此，calc(100% - 40px) = 60%，而 60% / 4 = 15%，即 calc(100% - 40px) / 4 被解析为 calc(15%)。

解决方案

有两种方法可以避免此问题：

• 直接使用：calc((~"100% - 40px") / 4)，其中 ~ 符号强制对字符串进行解析；
• 定义变量：@myHeight: 30px，然后 calc((~"100% - @{myHeight}") / 4)。

通过这样做，LESS 解析器将正确地保留单位，防止意外的计算结果。

以上就是LESS 中 calc() 运算单位混合陷阱：为什么 (100% - 40px) / 4 结果会变成 15%？的详细内容，更多请关注其它相关文章！