less无函数返回值，所谓“混合返回值”实为带参数混合通过when条件匹配注入css块或用插值@{...}动态生成属性名/值，需注意等号判断、引号包裹字符串及~"..."拼接语法。
Less 本身没有“函数返回值”的概念——它不支持像 JavaScript 那样用 return 向外传递计算结果。所谓“混合返回值”，其实是开发者对「带参数混合 + 属性注入」的误称。真正能做的，是让混合展开一组已知属性，或通过插值 + 参数组合生成动态属性名/值。
下面分几个实操场景讲清楚怎么做、为什么这么写、以及最容易翻车的地方。
带参数混合如何“模拟返回”样式逻辑
无返回值 ≠ 无复用价值。带参数混合的本质是：接收输入 → 内部做判断/计算 → 输出固定结构的 CSS 块。
比如你想根据传入的 @type 决定边框样式，不能写 border: getBorder(@type)（getBorder 不是函数），但可以：
- 定义混合：
.border-style(@type) when (@type = solid) { border-style: solid; } - 再加一个条件分支：
.border-style(@type) when (@type = dashed) { border-style: dashed; } - 调用时直接写：
.my-box { .border-style(dashed); }
这看起来像“返回了 dashed”，其实是 Less 编译器匹配到对应规则后，把整块声明注入进去。注意：when 条件必须用等号 =，不是 ==；且参数值若含空格或特殊字符，得加引号，比如 "dotted"。
用插值 @{...} 动态生成属性名
这是最接近“返回属性名”的操作，但限制极多：插值只在属性名位置生效，且变量必须是字符串字面量（带引号）。
错误写法：@prop: color; @{prop}: red; → 编译失败，因为 @prop 是标识符，不是字符串。
正确写法：
-
@prop: "background-color"; .demo { @{prop}: #007bff; }→ 输出.demo { background-color: #007bff; } - 拼接时必须用
~"..."包裹整个表达式：@dir: "top"; @{~"border-@{dir}-radius"}: 4px;→ 输出border-top-radius: 4px; - 千万别写成
@{~"@{prop}"}，那会输出带引号的字符串，浏览器直接忽略整行
旧版 Less（less@4.2.0+ 版本。
为什么不能在值里用 @{...} 当“返回值”
有人试过：@val: "16px"; font-size: @{val}; —— 这其实合法，但不是“返回”，只是变量引用。真正危险的是试图在函数调用中嵌套插值，比如：calc(100% - @{gap})。
问题在于：@{gap} 若未定义，Less 不报错，而是原样输出 calc(100% - @{gap})，导致 CSS 无效；若 @gap 是带单位的变量（如 @gap: 2rem），直接拼进 calc 可能引发单位混用错误（calc(100% - 2rem) 合法，但 calc(100% - @gap * 2) 就不行，Less 不支持表达式内运算）。
安全做法是：所有参与计算的值，先用 unit()、percentage() 等内置函数归一化，再传给混合，而不是靠插值“返回”中间结果。
混合里不能调用其他混合并“取回结果”
比如你写了 .get-padding(@size) { padding: @size * 2; }，然后想在别处写 margin: .get-padding(8px); —— 这完全不合法。Less 不支持混合作为右值，也不支持表达式求值后赋值。
可行替代方案：
- 用变量承接公共计算：
@base-pad: 8px; @pad-lg: @base-pad * 2;，然后padding: @pad-lg; - 把整套推导逻辑封装进一个混合，一次性展开所有依赖属性：
.card-layout(@size) { padding: @size * 2; margin: @size / 2; }
记住：混合是“代码生成器”，不是“计算器”。它的作用边界很清晰——展开、注入、条件分支。越想让它承担 JS 式逻辑，越容易掉进编译失败或静默失效的坑里。
实际项目中，最常被忽略的是插值的引号要求和 when 条件的语法细节。这两个地方出错，不会报红，但生成的 CSS 就是错的，而且很难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
