less中mixin必须严格遵循语法规则：定义调用均需英文括号、无参不可省略、参数须设默认值、嵌套需用&绑定、守卫条件须用英文引号字面量。
Less 中的 Mixin 不是“写完就能用”，括号漏一个、参数少一个默认值、嵌套里少个 &，编译就静默失败或样式错位——90% 的复用问题都卡在这几步上。
定义和调用必须带括号，无参也不能省
Less 把 .flex-center 当作普通 class，只有 .flex-center() 才是可调用的 mixin。漏括号不是警告，是直接忽略定义，调用时报 undefined mixin。
- 无参 mixin 必须写成
.clearfix() { ... }，调用也必须是.clearfix(); - 写成
.clearfix;或.clearfix，Less 会尝试匹配类名，找不到就报错，而不是提示“你少写了括号” - 中文括号、全角符号、空格（如
.mixin ( )）全部非法，只认英文小括号且紧贴名称
带参 mixin 必须设默认值，顺序不能乱
Less 不支持关键字传参，.btn(@color, @padding) 调用时只传一个值 .btn(#dc3545)，就会报 Variable @padding is undefined。
- 正确写法：
.btn(@color: #007bff, @padding: 8px 16px) { color: @color; padding: @padding; } - 调用时可省略尾部参数：
.btn(#28a745);→color覆盖，其余用默认值 - 想跳过中间参数？只能用 map：
.btn({ color: red, padding: 10px });，但定义端得配合@arguments或解构逻辑 - 单位要统一：定义用
@size: 12px，就别传"12px"字符串，除非内部做了isstring()判断
嵌套中调用必须加 &，否则样式跑出作用域
在 .card { } 块里写 :hover { .transition(); }，编译结果是 :hover { transition: ... } —— 全局生效，不是 .card:hover。
- 正确写法：
&:hover { .transition(opacity, .2s); }，&表示当前选择器链完整快照 -
&__title编译为.card__title，& .__title编译为.card .__title，空格决定连接还是后代 - 媒体查询内调用也要绑定：
@media (min-width: 992px) { & { .responsive-font(1.25rem); } }
守卫（when）只认字面量，不支持运算和函数调用
& when (@direction = top) 实际是在比变量 @top 是否等于 @direction，永远不成立；when (@size > 10px) 直接让编译器崩溃。
- 方向/状态类参数必须加英文引号：
& when (@direction = "top") - 大小写敏感：
"Top"≠"top"，中文引号“top”会报语法错误 - 需要数值判断？拆成多个重载：
.size(@s) when (isnumber(@s)) { font-size: @s; }+.size(@s) when (isstring(@s)) { font-size: @s; } - 慎用递归，5 层以上容易栈溢出
最麻烦的其实是调试：编译后 CSS 里看不到 mixin 痕迹，& 漏没漏、括号缺没缺、参数传没传对，全靠 source map 或手动加 content: "debug"; 验证。别等上线才发现样式没生效——那八成是 & 或括号掉了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
