LESS 中 calc() 运算单位混合陷阱：为什么 (100% - 40px) / 4 结果会变成 15%？
花韻仙語
发布： 2024-11-08 17:30:10
原创
805人浏览过
less 中单位混合运算的陷阱：为什么 calc((100% - 40px) / 4) 计算结果偏差？
在 LESS 中使用带单位混合的 calc() 运算时，可能会遇到 unexpected 的结果。本文将探究为什么 calc((100% - 40px) / 4) 在特定环境下会计算为 calc(15%)，并提供修复方法。
问题
“<p>正式环境是正常的，但是测试环境总会计算为15%</p>”
答案
在 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%？的详细内容，更多请关注php中文网其它相关文章！
最佳 Windows 性能的顶级免费优化软件
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
来源：php中文网
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
283
热门推荐
广告热门教程
更多>
相关推荐
热门推荐
最新课程
-
PHP8，究竟有啥野心..！？5189次学习
收藏
-
Apache和MySQL安装使用教程52430次学习收藏
-
黑马云课堂2016版Github开发视频教程33967次学习收藏
