less算术运算关键在单位统一与作用域控制：变量须带单位、避免混合单位运算、calc()内需预计算、媒体查询中变量需嵌套定义、间距生成需round()防浮点误差。
Less 的算术运算本身不难，难的是单位处理和作用域控制——写错一个单位或在错误位置重定义变量，生成的 CSS 就会留白异常、错位或直接无效。
用带单位变量做基础运算，别用无单位数字硬乘
直接写 @spacing-md: 16px; 然后 margin: @spacing-md * 2; 是安全的；但若写成 @spacing-md: 16; 再 margin: @spacing-md * 2px;，虽然结果也是 32px，却埋下隐患：一旦后续要转 rem，@spacing-md * 2 得补单位，漏一次就变成纯数字，unit(..., rem) 也救不回来。
- 推荐统一用带单位变量：
@spacing-xs: 4px;、@spacing-sm: 8px;，所有运算都在单位上下文中进行 - 避免混合单位参与同一运算：
1rem + 8px会报Operation on an invalid type，必须先统一为px（如用1rem * 16换算）再加减 - 乘法/除法中分母必须带单位，否则 Less 无法推导结果类型：
32px / 16报错，32px / 16px才返回2
calc() 里不能直接放 Less 变量，得先算好再塞进去
calc() 在 Less 中只是字符串透传，编译器不会解析它内部的 @gap 或 @gap * 2。写 width: calc(100% - @gap); 不会生效，轻则输出无效 CSS，重则编译失败。
- 正确做法是分两步：
@gap-2x: @gap * 2;，再width: calc(~"100% - @{gap-2x}");（注意~""和@{gap-2x}语法） - 如果只是固定比例，根本不用
calc()：width: percentage(3/4);直接输出75%，更干净可靠 - 需要视口动态减去固定值？只在外层用
calc()，数值部分全由 Less 预算好，例如：left: calc(100vw - unit(@sidebar-width, px));
媒体查询里重定义变量没用，得把样式块一起包进去
很多人在 @media (min-width: 768px) 里写 @spacing-md: 24px;，以为能全局生效——其实这只是语法错误，Less 编译器直接忽略，外面的 .btn { margin: @spacing-md; } 仍用旧值。
- 变量作用域是编译期块级的，
@media是运行时规则，两者不互通 - 正确方式是把相关样式嵌套进媒体查询：
@media (min-width: 768px) { @spacing-md: 24px; .card { margin: @spacing-md; } } - 若需多处复用，改用守卫 mixin：
.spacing-md() when (@breakpoint = desktop) { margin: 24px; }，调用前设好@breakpoint
批量生成间距变量时，unit() 和 round() 必须配合使用
用 .make-spacing() 循环生成 @spacing-1 到 @spacing-8 很方便，但若中间涉及除法换算（比如转 rem），浮点误差会导致渲染模糊或对齐偏移。
- 转
rem时别只写unit(24px / 16px, rem)，应加round()控制精度：unit(round(24px / 16px * 100) / 100, rem) - 所有生成函数返回值必须带单位，
get-spacing(3)应输出12px，不是12；否则下游calc(@spacing-3 + 1px)会失效 - 避免用字符串拼接：
~"@{val}px"绕过类型检查，get-spacing(0)可能产出0px，某些老浏览器对这种写法解析异常
最常被忽略的其实是每一步运算后的类型验证——Less 不报错不代表结果可用，inspect(@spacing-md) 多打几次，比靠经验猜强得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
