不加括号的Mixin会直接输出空CSS类，因其被Less视为普通选择器而非可复用样式块；加括号（如.mixin()）才触发仅调用时展开的正确行为，配合@import (reference)可避免未使用样式污染最终CSS。
混合器（Mixin）不加括号会直接输出空CSS类
Less 把 .mixin（无括号）当作普通 CSS 类选择器处理，只要声明就输出 .mixin { }，哪怕你从没调用过它。这在全局 mixins 文件里尤其危险——比如 _mixins.less 里写了 .btn-base，又用 @import (reference) 引入，结果 .btn-base 还是会被编译成空规则塞进最终 CSS。
常见错误现象：.btn-primary { .btn-base; } 编译后出现两段样式：一段是空的 .btn-base { }，一段是展开后的 .btn-primary { ... }。体积没省，还污染 DevTools 选择器列表。
- 正确写法必须加括号：
.btn-primary { .btn-base(); } - 搭配
@import (reference)才安全——但注意：@import (reference)不影响 mixin 调用逻辑，只抑制顶层样式输出 - Vue/React 的 scoped 样式下，无括号写法可能意外泄露为全局类，被其他组件 class 属性命中
嵌套中调用 Mixin 会继承父级选择器链
Mixin 本身不关心上下文，它只是把定义体“粘贴”进当前作用域。一旦在嵌套块里调用，& 就会自动拼接父选择器，导致选择器爆炸。比如 .card { .btn-base(); } 编译成 .card .btn-base { ... }，而你本意只是复用样式逻辑，不是新增层级。
更隐蔽的是多重嵌套：.modal { .header { .close { .icon(); } } } 会生成 .modal .header .close .icon { ... }，权重 0-4-0，后续覆盖基本只能靠 !important 或更长的选择器硬顶。
立即学习“前端免费学习笔记（深入）”；
- 避免在超过 2 层嵌套里调用 Mixin；3 层以上建议抽成平级类或用 BEM 命名替代
- 如果必须嵌套调用，优先用
&__element拼接新类名，而不是依赖后代关系 -
.icon()这类无参数、无条件的 Mixin，更适合改写为:extend(.icon all)来合并选择器
多个组件重复调用同一 Mixin 导致样式块复制
Mixin 是“声明即展开”，每次调用都原样复制全部声明。5 个按钮组件都写 .primary-btn { .btn-base(); }，最终 CSS 就有 5 份完全相同的 padding、border、transition 声明——体积翻倍，且无法被浏览器去重。
对比 :extend()：5 个类继承 .btn-base，编译后是 .btn-base, .primary-btn, .secondary-btn, ... { ... } 单行规则。体积差异在大型项目里可达百 KB 级别。
- 动态需求（如传参、条件判断）才必须用 Mixin；静态复用优先选
:extend() - 带参数的 Mixin（如
.rounded(@r)）无法被:extend()替代，但要注意控制调用频次 - 用 Chrome DevTools 的 Coverage 面板检查，常能发现大量
.card .btn, .list .btn, .form .btn这类重复块，根源就是 Mixin 调用失控
Mixin + extend 混用会触发双重冗余
有人想“保险起见”，既写 .btn-base() 又写 .btn-primary:extend(.btn-base all)。结果 Less 会分别处理：先展开 Mixin 生成一份 .btn-primary 样式，再合并 :extend() 生成另一份并列选择器。最终 CSS 里同时存在 .btn-primary { ... } 和 .btn-base, .btn-primary { ... }。
更糟的是跨文件场景：A 文件用 @import (reference) "_mixins.less"，B 文件用 @import "_extends.less"，两者都依赖 .btn-base，但定义来源不同，:extend() 找不到目标，退化为复制；Mixin 又因 reference 被跳过，调用失败——编译静默出错，样式直接丢失。
- 明确分工：Mixin 负责动态逻辑，
:extend()负责静态语义复用，不要交叉使用 - 所有基础类（如
.sr-only、.clearfix）必须收口到一个非-reference 文件，并用@import (once)统一引入 - 验证是否生效的唯一方式：打开编译后 CSS，搜索并列选择器（如
.icon, .btn-icon），没有就说明:extend()链断了
