less混合不支持命名参数，必须按顺序传参；可通过默认值、专用混合、@arguments转发或构建时预处理模拟，但原生不支持命名调用，频繁需求应考虑迁移到sass。
Less混合不支持命名参数，必须按顺序传参
Less本身没有命名参数语法，.mixin(@a: 1px, @b: red) 调用时只能写 .mixin(2px, blue)，不能写 .mixin(@b: blue, @a: 2px)。这是和Sass/SCSS最根本的区别之一，强行模仿命名调用会导致编译失败或意外覆盖默认值。
用多参数混合 + 默认值模拟“可选命名”效果
虽然不能真正命名传参，但可以通过为每个参数设默认值，并按需显式传入 undef 占位来跳过前面的参数：
.btn(@padding: 12px, @bg: #007bff, @color: #fff, @border: 1px solid #007bff) {
padding: @padding;
background: @bg;
color: @color;
border: @border;
}
// 想只改 color 和 border？必须填满前面的参数位置
.btn(12px, #007bff, #333, 2px solid #ddd); // ✅ 可行
.btn(undef, undef, #333, 2px solid #ddd); // ❌ Less 不识别 undef，会报错
所以更实际的做法是拆成多个专用混合：
-
.btn-primary()固定配色，内部调用.btn()并传固定参数 -
.btn-outline(@color: #007bff)封装常用变体，隐藏冗余参数 - 用
@arguments接收任意参数再转发（适合封装层）
用 JavaScript 插件或构建时预处理绕过限制
如果项目已用 Webpack/Vite，可在 Less 编译前用自定义函数注入动态值——但这不是 Less 原生能力，而是靠 less-plugin-functions 或 modifyVars 注入变量：
- Webpack 中通过
less-loader的additionalData注入全局变量@theme-color: #5850ec; - Vite 中用
css.preprocessorOptions.less.modifyVars动态传入主题配置 - 注意：这些变量在混合里仍是静态值，无法实现运行时“命名调用”逻辑
真正需要命名语义时，该换工具链了
如果你频繁遇到“只想改一个参数却要重写一长串”的痛点，说明 Less 的参数模型已成瓶颈。Sass 的 .mixin($bg: blue, $pad: 1em) { ... } 配合 @include mixin($pad: 2em) 才是原生支持命名调用的方案。Less 的混合设计初衷是轻量复用，不是接口抽象——越想把它当函数用，越容易掉进参数顺序和默认值覆盖的坑里。
关键点在于：Less 混合本质是 CSS 规则模板拼接，不是函数调用；所有“命名感”都得靠人肉维护参数顺序和文档约定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
