Less 的数学运算是单位敏感的编译期运算，不支持跨单位计算，需用 unit() 剥离单位、calc() 交由浏览器运行时处理，且所有运算均在编译时完成，无法响应屏幕变化。
Less 中的 +、-、*、/ 不是简单算术，而是单位敏感运算
Less 的数学运算不是 JavaScript 式的纯数值计算，它会严格保留单位并尝试自动归一化。比如 10px + 2em 会报错，因为单位不可通约；10px * 2 得到 20px，但 10px * 2px 会报 Operation on an invalid type —— 后者试图做“像素乘像素”，Less 不支持带单位的乘除（除数除外，且仅限数字作除数）。
常见踩坑点：
- 混用
rem和px直接相加：必须先转成同单位，或用函数剥离单位再运算 - 用
/做响应式比例时忘了加括号：100% / 3没问题，但100% / 3 - 10px会先算100% / 3再减10px，而 Less 默认左结合，实际等价于(100% / 3) - 10px，但若本意是100% / (3 - 10px)就彻底错 -
calc()不能被 Less 编译：写width: calc(100% - 20px)是合法的，但 Less 不会处理里面的运算，它原样输出；别指望 Less 把calc(100% - @gap * 2)中的@gap提前代入
用 unit() 和 percentage() 剥离/重装单位来绕过限制
当需要把带单位的值转为纯数字参与复杂运算（比如幂运算、取模、条件缩放），必须先用 unit() 拿掉单位，算完再用 unit() 或 percentage() 包回去。
例如实现一个「基于根字体的弹性间距」函数：
.pad-elastic(@base: 1rem, @factor: 1.2) {
padding: unit(unit(@base, px) * @factor, px);
}
说明：
-
unit(@base, px)把1rem转成当前1rem对应的像素数值（如 16），返回纯数字 - 乘以
@factor后，再用unit(..., px)包回px单位 - 注意：这依赖编译时已知
1rem的像素值（即编译环境需有确定的根字号），否则unit(1rem, px)会失败
响应式尺寸链式计算要用嵌套函数，避免中间值丢失精度
Less 不支持浮点数高精度运算，连续除法或小数乘法容易累积舍入误差。比如想让某容器宽度 = viewport 宽度 × 0.618 − 2 × 边距，直接写 width: 61.8% - 2 * @margin 看似简洁，但若 @margin 是 12px，结果是 61.8% - 24px —— 浏览器运行时才计算，无法和百分比对齐。
更可控的做法是统一转为视口单位（vw）后运算：
.fluid-width(@ratio: 0.618, @margin-px: 12px) {
@margin-vw: unit(@margin-px / 100, vw); // 假设 100px = 1vw
width: calc(~"@{ratio} * 100vw - @{margin-vw} * 2");
}
关键点：
- 用
calc()把最终表达式交给浏览器，确保动态响应 -
~""是 Less 的字符串插值语法，避免引号被转义 -
@margin-px / 100是把像素映射到vw（因1vw = 1% of viewport width，若设计稿宽 1000px，则 1px ≈ 0.1vw；此处简化为 100px = 1vw，需按实际基准调整）
不要在 @media 查询里用运算符动态生成断点值
Less 编译是一次性的，所有运算都在 CSS 输出前完成。@media (min-width: @breakpoint + 1px) 这类写法看似灵活，实则危险：如果 @breakpoint 是 768px，结果是 @media (min-width: 769px)，没问题；但如果它是 48em，48em + 1px 会报错 —— Less 无法混合单位。
正确做法是预先定义好带单位的断点变量，并用函数封装转换逻辑：
@bp-sm: 48em;
@bp-md: 768px;
<p>.bp-up(@bp) when (isstring(@bp)) {
@media (min-width: @bp) { }
}
.bp-up(@bp) when (isnumber(@bp)) {
@media (min-width: unit(@bp, px)) { }
}</p>
这样既保持语义清晰，又避开单位冲突。真正复杂的断点逻辑（如基于设备像素比、DPR 分层）应该交由 JavaScript 或 CSS @container，Less 不适合承担运行时决策。
最常被忽略的一点：Less 运算永远发生在编译期，它不感知屏幕尺寸、用户缩放、字体加载状态——所有“动态”都只是字符串拼接或单位转换。真要响应式，得靠 calc()、clamp() 或 JS 驱动。
