Less 3.5+解构语法需用@config...定义并配合extract()取值，不可直接用@config[key]；具名参数须置于普通参数之后，且需注意版本兼容性与编译性能。
Less 3.5+ 的 .mixin(...) 解构语法到底怎么写
Less 3.5 开始支持在 mixin 调用时解构对象参数，但不是所有写法都生效——必须配合 @arguments 或显式命名参数 + ... 展开符。常见错误是直接写 .btn({color: red, size: large}) 却没定义接收方式，结果编译报错 Expected ')' got '{'。
正确做法是先定义一个接受对象的 mixin，并用 ... 标记可解构：
.btn(@config...) {
@color: extract(@config, color, #007bff);
@size: extract(@config, size, medium);
color: @color;
font-size: if(@size = small, 12px, if(@size = large, 18px, 14px));
}
调用时才能传对象字面量：
.btn({color: #dc3545, size: large});
为什么 extract() 比 @config[color] 更安全
Less 不支持原生对象属性访问语法（如 @obj[key]），强行写会报错 Cannot access property of a value that is not an object。很多人误以为升级到 3.x 就能像 JS 一样用方括号取值，其实不能。
立即学习“前端免费学习笔记（深入）”；
extract() 是 Less 内置函数，专为从 list 或 map 中取值设计，第三个参数还能设默认值，避免未定义字段导致编译失败：
-
extract(@config, padding, 8px)→ 安全回退 -
@config[padding]→ 直接中断编译 - 注意：
@config必须是 list 形式（逗号或空格分隔），不是 JSON 对象；Less 里所谓“map”本质是带 key 的 list，例如(color red, size large)
混合使用解构与普通参数时的顺序陷阱
Less 要求具名参数（含解构）必须放在普通位置参数之后。写成 .card(@type, @config...) 没问题，但反过来 .card(@config..., @type) 会报 Mixins may not have variable arguments before fixed arguments。
典型场景：按钮既要指定类型（primary / secondary），又要传样式配置：
.btn(@type, @config...) {
@bg: extract(@config, bg, #007bff);
background-color: if(@type = primary, @bg, desaturate(@bg, 20%));
border: 1px solid darken(@bg, 10%);
}
.btn(primary, {bg: #28a745});
如果漏掉 @type 或颠倒顺序，编译器不会提示“参数不足”，而是静默忽略多余参数，最终样式出错却难以定位。
性能和兼容性提醒：别在循环里滥用解构
解构本身不慢，但配合 each() 和深层 extract() 嵌套时，Less 编译时间明显上升——尤其当配置项超过 5 个、循环次数 >10，容易触发 Node.js 的堆内存警告。
更实际的问题是构建工具兼容性：Webpack 的 less-loader@7 默认用 Less 3.13，支持解构；但若项目锁死 less@3.0.4（某些老 CLI 脚手架），@config... 会直接报错，且错误信息不提示版本问题。
建议上线前检查：lessc --version，并始终为关键 mixin 提供降级写法（比如拆成多个独立参数的重载版本）。
