Less 的 Mixin 不能返回值，因其本质是代码片段插入器而非函数，不支持 return、计算结果或赋值；应改用内置函数、变量组合或 CSS/JS 处理动态计算。
Less 中的 Mixin 不能返回值，这是根本限制
Less 的 mixin 本质是代码片段插入器，不是函数——它不支持 return、不产生计算结果、也不能被赋值给变量。试图写 @top: .calc-position(10px); 会直接报错 SyntaxError: Cannot parse inline value。所有“用 Mixin 返回值做计算”的想法，都源于对 Less 编译机制的误读。
替代方案：用函数（not mixin）处理几何计算
Less 内置了真正的函数（如 percentage()、round()、unit()），也支持自定义函数（通过 JavaScript 插件），但最常用且可靠的是组合内置函数 + 变量 + 嵌套计算：
- 把坐标逻辑拆成中间变量：
@base: 20px; @offset: 5%; @scale: 1.2; - 用函数链式计算：
top: calc(@base + percentage(@offset) * 0.8);（注意：calc()是 CSS 函数，不是 Less 函数） - 真正需要运行时动态计算（如基于视口比例）时，应改用 CSS 自定义属性 +
clamp()或 JS，Less 在编译期无法读取 DOM 尺寸
常见踩坑：混淆 calc() 与 Less 计算
写 left: calc(@x * 2); 看似合理，但实际会输出原样字符串 calc(@x * 2)，因为 calc() 内部不触发 Less 求值。必须显式展开：
@x: 10px;
.left {
left: calc((@x * 2) - 4px); // ✅ 编译为 calc(20px - 4px)
}
更危险的是混用单位：@x: 10; left: calc(@x * 1px + 5%); 会因单位不兼容导致 CSS 失效，浏览器拒绝解析整个 calc() 表达式。
立即学习“前端免费学习笔记（深入）”；
复杂布局建议：放弃 Mixin 驱动，转向 CSS 逻辑原语
当位置计算涉及 viewport、aspect-ratio、min/max-content 或响应式断点时，Less 的静态编译能力已到极限。此时应：
- 用
container查询 +aspect-ratio控制容器几何 - 用
translate()和transform-origin替代硬编码top/left - 将动态偏移逻辑交给
scroll-driven animations或resizeObserver
Less 适合管理设计系统中的固定间距、颜色变量和断点常量；一旦计算依赖运行时环境，就该让位给 CSS 或 JS —— 这不是妥协，是职责边界。
