命名参数让.mixin()调用不再靠猜顺序：定义时必须用@name: value声明默认值，调用时可自由指定参数名如.button(@size: large, @theme: brand)，支持混用但不推荐，适用于语义差异大或多维组合场景，需配合when守卫和前置变量加载确保有效性。
命名参数让.mixin()调用不再靠猜顺序
Less默认按位置匹配参数，.button(@size, @variant, @theme)这种写法，调用时.button(medium, primary, dark)看着还行，但一旦加到4–5个参数，谁还记得第3个是圆角还是边框色？命名参数直接绕过这个陷阱：参数名明确告诉你是谁，顺序完全自由。
- 必须在定义时用
@name: value语法声明，默认值不是可选，而是强制要求——没默认值又不传参，编译直接报variable @xxx is undefined - 调用时用
@name: value形式，比如.button(@size: large, @theme: brand)，哪怕把@theme写在前面也完全合法 - 混用位置和命名参数允许，但不推荐：
.button(large, @theme: brand)容易让人误以为large对应@size，其实它可能被编译器按位置塞进第一个未命名参数里，造成隐性错位
什么时候该用命名参数而不是逗号分隔
当参数语义差异大、组合方式多变、或未来大概率要新增参数时，命名参数就是刚需。比如一个.card()Mixin，如果支持阴影开关、圆角大小、内边距等级、主题色系四个维度，用位置参数就得记.card(true, 8px, md, primary)，而命名参数写成.card(@shadow: true, @radius: 8px, @padding: md, @color: primary)，一眼看懂每个值干啥。
- 逗号分隔适合纯数值序列，比如
.gradient(@stops: 0%, 50%, 100%)——这里逗号是CSS渐变语法的一部分，不是参数分隔符 - 分号才是Less推荐的参数分隔符，尤其当你需要传入数组类值时：
.flex-wrap(@direction: row; @wrap: wrap)，分号明确划清参数边界，避免row, wrap被误判为两个独立参数 - 命名参数不能解决“参数太多”的问题，只是让调用更安全；真有6个以上参数，说明Mixin职责过重，该拆了
命名参数配合Guard条件才能防坑
光写@shadow: false当默认值不行——box-shadow: false是无效CSS。必须用when条件控制输出逻辑，否则参数名再清楚也没用。
- 错误写法：
.card(@shadow: false) { box-shadow: @shadow; }→ 编译出box-shadow: false;，浏览器忽略 - 正确写法：
.card(@shadow: false) when (@shadow = true) { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }，只在明确传@shadow: true时才输出规则 - 颜色类参数别裸写值：
@color: @color-primary，而不是@color: #007bff，否则主题切换时这个参数就断连了
import顺序错了，命名参数也救不了你
命名参数再清晰，也依赖变量真实存在。如果@color-primary在mixins.less之后才被定义，那所有用@color: @color-primary的Mixin都会回退到Less默认值或报错——参数名再准确，引用的变量本身是空的。
- 所有变量必须在Mixin定义前加载，推荐统一入口
@import "core/index.less"，里面按variables→functions→mixins顺序导出 - 组件文件里禁止
@import "variables.less"单独引入，否则路径一动就File not found，且容易和主变量冲突 - 命名参数本质是“带标签的占位符”，它不绑定值，只绑定变量名；变量在哪定义、何时生效，才是决定它有没有意义的关键
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
