less mixin是编译期样式逻辑注入机制，非简单复制粘贴；定义和调用必须带括号，参数须设默认值且按位置匹配，嵌套中需用&绑定上下文，否则导致样式失效、污染或编译失败。
Less Mixin 不是“写一次到处粘贴”的快捷键，而是编译期样式逻辑的注入机制；漏括号、参数错位、嵌套漏 &，三者任一都会导致样式失效或污染全局。
定义 mixin 必须带括号，否则就是普通 class
Less 会静默忽略无括号的声明，调用时直接报 undefined mixin。这不是语法警告，而是编译失败。
- 错误写法：
.center { display: flex; }→ 被当作文本类规则，.center()调用必报错 - 正确写法：
.center() { display: flex; justify-content: center; }→ 可被.center();正常调用 - 无参也必须空括号：
.clearfix() { &:before, &:after { content: ""; display: table; } &:after { clear: both; } }
带参 mixin 要设默认值，且参数顺序不能乱
Less 不支持关键字传参，只认位置顺序；没设默认值的参数，空参调用就会中断编译。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 安全定义：
.btn(@color: #007bff, @bg: #fff, @radius: 4px) { color: @color; background: @bg; border-radius: @radius; } - 合法调用：
.btn(#dc3545);→ 只覆盖第一个参数，其余用默认值 - 非法调用：
.btn("12px");→ 类型不匹配（字符串 vs 颜色/长度），除非定义里明确接收字符串 - 避免耦合：
.shadow(@x: 0, @y: 2px, @blur: 4px, @color: rgba(0,0,0,.15))，别塞成一个@config字符串
嵌套中调用 mixin 必须用 & 绑定上下文
漏掉 & 就等于把样式规则“提”到全局作用域，轻则覆盖其他组件，重则破坏响应式断点封装。
- 错误写法：
.card { :hover { .transition(all, .3s); } }→ 编译出:hover { transition: all .3s; }，影响所有元素 - 正确写法：
.card { &:hover { .transition(all, .3s); } }→ 编译出.card:hover { transition: all .3s; } - 响应式场景更需注意：
.card { @media (min-width: 992px) { & { .responsive-font(1.25rem); } } }
多个 mixin 共用同一属性时，覆盖顺序决定最终效果
Less 是文本展开，不是运行时计算；后写的 mixin 声明会直接覆盖前面同名属性，且无 warning 提示。
- 例如：
.button { .border-radius(4px); .border-radius(8px); }→ 最终只有border-radius: 8px - 若两个 mixin 都设
box-shadow，就得确认是否真要后者覆盖前者，还是该合并进一个统一 mixin - 高频复杂 mixin（如含多层媒体查询+伪类）容易导致 CSS 膨胀，应拆成语义小单元，比如
.rounded-sm()、.rounded-lg()分开定义
真正难的不是写出 mixin，而是在一个组件同时调用 .shadow-sm()、.bg-white()、.p-4() 时，其中某个内部悄悄重写了 padding 或 background —— 这时候得对照编译后的 CSS 逐行反查，而不是靠猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
