less不支持跨单位运算，100% - 20px会报错或静默失败；需用~""转义calc()、unit()剥离单位再换算，且须防未初始化变量导致nan。
因为 Less 编译器在运算阶段强制类型检查，100% - 20px 这类跨单位表达式根本不会被计算，而是直接报错或静默失败 —— 它不是“算错了”，是压根没进入运算流程。
Less 对单位混合的处理规则很死板
Less 要求参与加减乘除的所有操作数必须单位一致，或全部为无单位数值。百分比（%）和像素（px）属于不同维度的单位，编译器不提供隐式转换逻辑。
-
100% - 20px→ 报错Operation on an invalid type或输出无效 CSS（如100% - 20px字面量，浏览器忽略整条声明） -
@width: 100px; @gap: 20px; width: @width - @gap;→ 正确，单位相同，结果为80px -
@base: 100; width: ~"@{base}%";→ 可行，但这是字符串拼接，不是运算
calc() 不能直接写进 Less 表达式里
你写的 calc(100% - 20px) 看似是 CSS 原生函数，但在 Less 中会被当作数学表达式提前解析，而不是原样透传给浏览器。
-
width: calc(100% - 20px);→ Less 尝试计算，失败，可能输出空值或错误结果 -
width: calc(~"100% - 20px");✅ 正确：用~""强制转义，阻止 Less 解析内部内容 -
@gap: 20px; width: calc(~"100% - @{gap}");✅ 插值必须在~""外进行，@{gap}在引号外才会展开
想混用单位？得先剥离再重赋
如果真需要把像素值纳入百分比上下文（比如算列宽时扣掉固定间隙），唯一可靠路径是：把像素转成无单位小数，再参与百分比运算。
- 设
@gutter-px: 20px;，先用unit(@gutter-px, '')得到20 - 再换算成占视口的比例：
@gutter-vw: unit(@gutter-px, 'vw') / 100 * 100;不行 ——unit()不支持vw目标单位 - 实际做法：
@gutter-ratio: unit(@gutter-px, '') / unit(100vw, ''); // 假设 100vw = 375px → 20 / 375 ≈ 0.0533 - 然后写：
width: percentage(1 / @cols - @gutter-ratio * 2);
最容易被忽略的坑：变量未初始化就参与运算
Less 不会报错，但会静默返回 NaN 或空字符串，导致生成的 CSS 宽度变成 width: ;，DevTools 里这条声明直接灰掉。
-
@container-width: ; // 空值→ 后续@item-width: @container-width / 3;结果不可预测 - 检查方式：编译后打开生成的 CSS，搜索含
/的声明行，看是否被原样输出（如width: 100px / 3;），那就是漏括号或变量未定义 - 防御写法：
.col { @w: isnumber(@container-width) then @container-width else 100px; width: (@w / 3); }
真正麻烦的从来不是“怎么写对”，而是错误不报红、不中断构建、也不出现在控制台 —— 你得盯着编译后的 CSS 文件，逐行确认每个 / 和 % 是否按预期变成了数字或字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
