less中calc()必须用~""转义包裹并配合变量插值，否则会被解析器误作数学表达式计算导致错误或输出异常。
Less 中直接写 calc() 必然出问题，不是编译报错就是输出错乱 CSS，必须用 ~"" 转义包裹并配合变量插值，否则浏览器收不到合法的 calc() 声明。
为什么 calc(100% - 20px) 在 Less 里会编译失败
Less 解析器看到 calc() 就默认括号内是它自己的数学表达式，会尝试执行 100% - 20px：单位不匹配 → 降级为 calc(80%)，或报错 Variable @20px is undefined。这不是你写错了，是 Less 把浏览器该干的活抢了。
- 常见错误现象：
height: calc(100vh - @header-height);编译后仍是原样，浏览器直接忽略整条规则 - 空格缺失也会失效：
calc(100%-20px)（无空格）被当做一个非法维度值，CSS 引擎静默丢弃 - Less 4.x 依然如此，别信“新版已修复”——构建链路中旧版
lessc或less-loader仍按老规则解析
必须用 ~"calc()" 包裹，且变量要带单位
~"" 是唯一可靠方式，它强制 Less 把引号内内容当纯字符串输出，不解析、不计算、不替换括号里的运算符。
- 基础写法：
width: ~"calc(100% - 20px)";—— 输出width: calc(100% - 20px); - 带变量时：
@gap: 20px;+margin: ~"calc(@{gap} * 2)";—— 单位必须随变量定义，@gap: 20;❌ - 禁止拼接：
~"calc(100% - " @{gap} ")"语法错误；必须写成完整插值：~"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) - 响应式中不能靠重定义变量更新
calc()：媒体查询里改@gap，已编译的calc()不会重算，得为不同断点单独写规则
别混淆编译期和运行时计算
calc() 是浏览器运行时执行的，Less 只负责原样输出字符串；而 percentage()、round() 等是 Less 编译期函数，两者不能混用。
- 错误写法：
calc(percentage(1/12) * 100%)——percentage()不接受带单位值，且整个表达式仍需~""包裹 - 安全替代：
@col-ratio: percentage(1/12); width: ~"calc(@{col-ratio} - @{gutter})"; - CSS 自定义属性（
--gap）无法被 Less 读取，calc(var(--gap) * 2)必须靠 JS 或 fallback 处理，Less 层只管输出字符串
最易被忽略的一点：所有 calc() 表达式里，加减号前后必须有空格，括号必须成对，单位必须显式携带——这些不是“建议”，而是浏览器解析的硬性要求，Less 的 ~"" 只解决转义问题，不替你校验语法合法性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
