Less中calc()不解析变量运算，需先用Less计算再传入；单位换算须用unit()和round()避免丢失单位；跨单位运算需统一为px再转换；复杂表达式优先Less预计算而非calc()。
Less里用calc()和变量混合运算会失效？
Less编译器在遇到calc()时默认将其当作普通字符串原样输出，不会解析内部的加减乘除——所以@gap: 16px; margin: calc(100% - @gap);会直接报错或生成无效CSS。真正可行的是让Less先完成单位换算，再把结果塞进calc()，或者干脆用Less原生运算替代部分场景。
用unit()和round()做安全的px转rem换算
响应式间距常需基于根字体大小动态计算，比如把24px转成1.5rem（假设html { font-size: 16px; }）。直接写24px / 16px会得到1.5但无单位；漏掉unit()会导致后续无法参与长度运算。
@base-font: 16px;@spacing-xs: unit(8px / @base-font, rem); // => 0.5rem@spacing-lg: unit(round(32px / @base-font * 100) / 100, rem); // => 2rem，避免浮点误差- 别用
32px / 16——分母没单位，Less会报Operation on an invalid type
响应式断点中嵌套计算要防单位冲突
在@media里动态调整padding或gap时，容易把em、rem、px混着算。Less不支持跨单位加减（如1rem + 8px），必须统一。
- 推荐做法：全部转为
px做中间计算，再用unit()转目标单位 @breakpoint-md: 768px;@gap-base: 16px;@gap-responsive: unit((@gap-base * 1.5), px); // => 24px- 然后在媒体查询里：
@media (min-width: @breakpoint-md) { padding: @gap-responsive; } - 如果硬要
rem，确保所有输入值都带rem单位，且基准一致
复杂表达式里优先用Less运算，而非依赖calc()
浏览器运行时calc()适合处理“视口相关+固定值”组合（如calc(100vw - 32px)），但纯设计系统内的间距比例（如1x/2x/3x倍率）完全可由Less预计算——更可靠、无兼容性问题、生成代码更干净。
- 错误示范：
margin: calc(@gap * 2);—— Less不识别@gap * 2在calc内 - 正确做法：
@gap-2x: @gap * 2;，然后margin: @gap-2x; - 需要混入视口单位？只在外层用
calc：width: calc(~"100% - @{gap-2x}");（注意~""取消引号转义） - 注意
~"..."里的变量必须用@{var}语法，不能直接写@var
最易被忽略的是单位隐式丢失——Less变量一旦参与除法且分母无单位，结果就变成纯数字，后面再unit(..., rem)也救不回来。每一步运算后用inspect()临时调试下类型，比猜强得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
