「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2 万元奖池等你挑战」

Less 中使用 Css3 calc()函数遇到的问题

背景

这两天在写样式的时候，遇到了这个奇奇怪怪的问题，于是便记录下来

按照习惯的写法

.block {
    overflow-y: auto;
    height: calc(100% - 56px);
}

编译后的代码

.block {
    overflow-y: auto;
    height: -webkit-calc(44%);
    height: calc(44%);
}

😱显然结果不是们想要的，Less 已经预先帮我们计算了100% - 56px的值

检查本地的Less版本

"less": "^2.7.2",
"less-loader": "3.0.0",

解决思路

方案一

• 我们打开 Less 的文档，找到 运算 Operations 这一章节

看完后，我们就理解为啥结果为44%了（首先计算100- 56，其次优先取第一个数的单位，也就是%，最后得到56%）

---

回到我们的问题，我们并不想让Less帮我们多干这样的一件事情，简而言之就是不需要你帮我计算，当做字符串处理就好了

---

• 我们找到 转义 Escaping 这一章节

看完后，我们就知道如何进行转义了

下面进行代码转义

.block {
    overflow-y: auto;
    height: calc(~"100% - 56px");
}

代码编译后代码

.block {
    overflow-y: auto;
    height: -webkit-calc(100% - 56px);
    height: calc(100% - 56px);
}

Less没有处理我们的这个转义后的字符串，我们的问题也就迎刃而解了 😀

方案二

简单暴力，升级less和less-loader，问题也能解决

"less": "3.13.1",
"less-loader": "5.0.0"

最后

楼主采用的方案一，因为项目不是个人的，升级loader可能对项目平稳性造成影响，还是稳妥着来 😂

好好学习不会差，我是 970，大家一起进步