less mixin 必须带括号定义（如 .center()），否则视为普通 class；无参也需空括号；参数须严格匹配并设默认值；嵌套中调用需用 & 避免全局污染；多 mixin 同属性易覆盖；编译即展开，宜拆小单元控制膨胀。
Less Mixin 必须带括号定义，否则调用就报 undefined
没括号的 .center 不是 Mixin，是普通 class 规则；只有 .center() 才会被识别为可复用样式块。这是最常踩的坑——写完以为能用，一编译就报 undefined mixin。
- 无参 Mixin 也得加空括号：
.clearfix() { &:before, &:after { content: ""; display: table; } &:after { clear: both; } } - 调用时漏括号，比如写成
.card { .border-radius; }，会生成一个叫.border-radius的空 class，而不是插入圆角样式 - 参数类型必须严格匹配：定义是
.size(@px)，就不能传"12px"字符串（除非 Mixin 内部明确做类型判断）
带参 Mixin 要设默认值，且避免参数耦合
参数不是越多越好，而是要覆盖真实可变点。比如按钮尺寸、圆角、禁用态透明度，这些该拆成独立参数，而不是塞进一个 @config 字符串里。
- 错误示范：
.btn(@config) { opacity: if(@config = "disabled", .4, 1); }—— 无法局部覆盖，改个圆角还得重传整个字符串 - 正确做法：
.btn(@radius: 4px, @opacity: 1) { border-radius: @radius; opacity: @opacity; } - 颜色类参数慎用
lighten(@color, 10%)直接计算，基础色一变，所有衍生色全偏；更稳的是引用语义变量：background: @btn-hover-bg;
嵌套中调用 Mixin 必须带 &，否则生成全局规则
在 .card { } 块里写 :hover { .transition(); }，编译出来是 :hover { transition: all .3s ease; } —— 全局生效，不是只作用于 .card。
- 正确写法：
.card { &:hover { .transition(opacity, .2s); } }，编译为.card:hover { transition: opacity .2s ease; } - 漏掉
&是调试时最难发现的问题之一：样式“好像写了”，但根本没起效，或者起效范围远超预期 - 多个 Mixin 共用同一属性（如都设
transition），要确认是否互斥；否则后调用的会覆盖前一个，比如.transition(width); .transition(opacity);最终只剩 opacity
Mixin 编译即展开，高频使用易导致 CSS 膨胀
Less 没有“运行时引用”概念，.shadow-sm() 在 15 个地方调用，就会生成 15 份完全相同的 CSS 块。体积暴增往往不是因为用了 Mixin，而是没控制好展开粒度。
- 把大而全的 Mixin 拆成小单元：
.shadow()、.rounded()、.pad()，比一个.card-base(@shadow, @radius, @padding)更可控 - 用
@import (once)防止公共 Mixin 文件被重复引入，路径差异（如"mixins"vs"./mixins"）仍会被视为不同文件 - 生产环境务必启用压缩（
compress: true）和strictMath: true，避免未用计算泄露进输出
.card 同时混入了 .shadow-sm、.bg-white、.border，而其中某个内部又悄悄重写了 box-shadow 或 background —— 这时候你得顺着编译后的 CSS 往回查，而不是靠扫源码定位。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
