Mixin 是 Less 中用于复用带逻辑样式的机制，需带括号定义调用，支持参数、条件和计算；@extend 仅适用于静态类继承，普通 class 无参数能力。
Mixins 是 Less 里最常用也最容易用错的复用机制——它不是“写一次，到处复制粘贴”，而是“定义逻辑，按需注入样式”。直接抄代码不改参数，八成会遇到变量污染、作用域混乱或编译失败。
什么时候该用 .mixin()，而不是 @extend 或普通 class？
当你要复用的是一组有逻辑关联的声明（比如带前缀的 flex 布局、响应式断点封装、颜色+阴影+过渡组合），且这些声明中可能含参数、条件判断或计算，就该选 .mixin()。而 @extend 只适合纯静态类名继承（如 .btn 继承 .inline-block），普通 class 则无法传参或做逻辑分支。
- 需要传入颜色、尺寸、断点值等动态参数 → 必须用
.mixin() - 要根据参数生成不同前缀（如
-webkit-/-ms-）→.mixin()内可嵌套.if()或 guard - 只是共用几行固定样式（如
margin: 0; padding: 0;）→ 普通 class 更轻量，无需上 mixin
.mixin() 定义时漏掉括号，会导致编译器静默忽略
Less 对语法容忍度低：定义 .flex-center { ... }（无括号）会被当作普通 class；必须写成 .flex-center() { ... } 才是 mixin。调用时若漏括号（如 .flex-center），Less 会尝试匹配 class 名，找不到就报 Unknown word 错误，而非提示“这是个 mixin，请加括号”。
- 定义必须带
()，哪怕无参数：.clearfix() { &::after { content: ""; display: table; clear: both; } } - 调用也必须带
()：.clearfix();，不能写成.clearfix; - 带参数的定义如
.size(@w, @h) { width: @w; height: @h; }，调用时参数顺序严格对应
参数默认值和命名参数能避免很多硬编码陷阱
写 .btn(@color: #007bff, @padding: 8px 16px) 比每次调用都填满所有值更安全。但要注意：Less 不支持 Python 那种关键字传参语法，.btn(@padding: 12px 24px, @color: red) 会报错；必须靠位置顺序，或改用映射参数（Less 3.5+）。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
.btn(@color: #007bff, @bg: #fff, @padding: 6px 12px) { color: @color; background: @bg; padding: @padding; } - 调用时可省略尾部参数：
.btn(#dc3545);→ color 覆盖，其余用默认值 - 想跳过中间参数？只能用 map：
.btn({ color: #28a745, padding: 10px 20px });，此时 mixin 定义需用@arguments或解构@rest...
嵌套 mixin 和作用域泄漏是调试噩梦
在 .card() 里再调用 .shadow() 很自然，但如果两个 mixin 都用了同名变量（如 @radius），内层会覆盖外层，且不会警告。更麻烦的是，如果 mixin 内用了 & 选择器嵌套，又在另一个选择器里调用它，生成的 CSS 选择器可能深得离谱。
- 所有 mixin 内部变量建议加前缀，如
@shadow-radius而非@radius - 避免在 mixin 中写
& .header这类嵌套，除非你明确需要相对父选择器的行为 - 用
//注释说明 mixin 的副作用，例如：// 注意：此 mixin 会重置 box-sizing 为 border-box
真正难的不是写出一个能跑的 mixin，而是让它在三个月后别人接手时，不靠猜就能看懂参数意图、不触发隐藏的样式冲突、不因升级 Less 版本突然失效。多花十秒加注释、少用一层嵌套、参数宁可多设一个默认值——这些动作比堆砌炫技语法重要得多。
