less 编译期会错误解析 calc() 为数学表达式，导致报错或降级；必须用 ~"calc(100% - 20px)" 包裹，变量需带单位，复杂公式应分步验证，响应式中需单独写规则，统一强制使用 ~"" 写法。
Less 编译期把 calc() 当成数学表达式提前计算
Less 不会把 calc() 当作浏览器运行时才执行的 CSS 函数，而是直接解析括号内的 -、+ 等符号，当成自己的运算符处理。比如 calc(100% - 20px) 会被它尝试计算：100% 换不成 px → 降级输出 calc(80%) 或报错 Variable @20px is undefined —— 这不是你写错了，是 Less “多管闲事”了。
实操建议：
- 所有
calc()表达式必须用~""包裹，例如：width: ~"calc(100% - 20px)"; - 引号内空格不能省：
calc(100%-20px)❌（浏览器静默丢弃），calc(100% - 20px)✅ - 不要写
calc(100% - 20px)或calc(@gap)—— 这些写法在 Less 4.x 中已完全失效
变量参与 calc() 时单位必须显式携带
Less 变量是编译期字符串替换，不带单位的变量插进去就是裸数字，calc(100% - @{gap}) 如果 @gap: 20，结果是 calc(100% - 20)，浏览器直接忽略整条声明。
实操建议：
- 定义变量时就带上单位：
@gap: 20px;，而不是@gap: 20; - 插值必须和
~""配合：height: ~"calc(100vh - @{header-height})"; - 避免拼接式写法：
~"calc(100% - " @{gap} ")"❌（语法错误），应写成完整字符串插值
复杂公式别堆在一行，要拆解并验证输出
像 calc((100vw - 2 * @gutter - 3 * @item-width) / 3) 这类表达式，直接塞进 ~"" 容易漏括号、空格或单位错位，且 Less 不报错，但编译后 CSS 无效。
实操建议：
- 用中间变量分步控制：
@safe-gutter: unit(@gutter, 'px');，再参与拼接 - 调试时加个注释打印最终值：
// compiled: ~"calc(100% - @{gap})"，然后看生成的 CSS 是否真为calc(100% - 20px) - 响应式中重定义变量（如
@media (max-width: 768px) { @gap: 12px; }）不会更新已编译的calc()，需为不同断点单独写规则
别信“新版 Less 支持自动识别 calc()”这种说法
即便文档提到“部分场景下允许裸写”，实际构建链路（尤其是旧版 less-loader 或 CI 环境中的 lessc）仍大概率按老规则解析。一个没加 ~"" 的 calc()，可能在本地 OK，上线后布局偏移，DevTools 里连那条样式都看不到。
实操建议：
- 统一强制使用
~"calc(...)"写法，不依赖版本差异 - 检查构建产物 CSS 文件，确认
calc()是否原样存在、括号完整、空格正确、无多余引号 - 真正容易被忽略的是：嵌套 mixin 或循环中生成的
calc()，哪怕只有一处漏了~""，整个块的布局都可能崩
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
