less中无函数返回值，但可通过提前声明变量（如@output）并在mixin中赋值来模拟；需确保声明、调用、使用三者同作用域且顺序正确；多值场景宜用嵌套mixin传参；避免动态变量名和!default隐式逻辑。
Less里没有函数返回值，但可以用变量+作用域模拟
Less本身不支持函数式编程里的“返回值”概念，mixins 不能像 JavaScript 的 return 那样把计算结果传出来。不过，通过提前声明变量、利用 mixins 对变量的赋值能力，可以实现“在 mixin 中计算并暴露 CSS 值”的效果。
关键在于：变量必须在调用 mixins 之前声明（哪怕初始值为空），且作用域要能被后续代码读取——通常放在顶层或同一作用域块内。
用 @output 变量接收 mixin 计算结果
这是最常用也最可控的方式：约定一个命名明确的输出变量（比如 @output 或 @result），让 mixins 负责给它赋值。
常见错误现象：mixins 内部定义的变量无法在外部访问，因为默认是局部作用域；或者忘记提前声明，导致后续使用时报 undefined variable 错误。
- 必须在调用 mixin 前声明变量，例如：
@color-result: null; - mixin 内部直接赋值：
.calc-color() { @color-result: darken(@base-color, 10%); } - 调用后立即使用：
.calc-color(); background-color: @color-result; - 注意顺序：变量声明 → mixin 调用 → 使用变量，三者必须在同一作用域层级
嵌套 mixin + 参数传递可替代“多返回值”场景
当需要“返回”多个值（如颜色 + 边框宽 + 圆角），不要试图塞进一个变量，而是把后续逻辑封装进另一个 mixin，并以参数形式传入：
.get-theme-values() {
@primary: #007bff;
@border-width: 2px;
@radius: 4px;
.apply-theme(@primary, @border-width, @radius);
}
.apply-theme(@c, @w, @r) {
color: @c;
border: @w solid @c;
border-radius: @r;
}
这种写法绕过了“返回值”限制，也避免了全局污染。性能上无额外开销，但要求调用方必须配合接收逻辑——不适合纯计算型复用（比如只想要一个数值做运算）。
慎用 !important 和作用域泄漏
有人会用 @{variable-name} 拼接变量名来动态读取，或依赖 !default 实现“回退”，但这会让逻辑难以追踪，且容易因作用域嵌套导致意外覆盖。
- 避免在 mixin 内用
@{name}动态生成变量名，调试困难、IDE 不识别 - 不要依赖未声明变量的
!default行为来“隐式返回”，比如@x: 12px !default;—— 它只在首次定义时生效，后续调用不会刷新 - 如果 mixin 被多次调用，且都写入同一个
@output，后一次会覆盖前一次，这点常被忽略
真正稳定的方案永远是：显式声明、单次赋值、就近使用。复杂计算建议抽到独立 Less 文件中预编译，而不是靠运行时 mixin 模拟函数逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
