带括号的 .mixin() 能减少冗余输出，因为它被识别为纯 Mixin（仅调用时展开），而无括号的 .mixin 会被当作普通 CSS 类选择器直接编译输出，即使未被调用；加括号是避免无意义 CSS 生成的第一道开关。
为什么带括号的 .mixin() 能减少冗余输出
Less 中 .mixin（无括号）和 .mixin()（有括号）行为完全不同：前者是“声明式选择器”，后者才是真正的“可复用样式块”。不加括号时，Less 会把它当做一个普通 CSS 类选择器直接输出；加了括号，它才被识别为 Mixin，只在被调用时展开——这是避免无意义 CSS 输出的第一道开关。
-
.clearfix（无括号）：只要定义就生成.clearfix { ... }，哪怕从没被调用过 -
.clearfix()（有括号）：定义时不输出任何 CSS，只有.box { .clearfix(); }这类调用才会插入样式 - Webpack/Vite 项目中，全局引入一个
mixins.less文件时，若里面混着大量无括号声明，所有未使用的“伪类”都会打进最终 CSS - Vue/React 的 scoped 样式下，无括号写法还可能意外污染全局，因为编译器不区分它是“想用的类”还是“只是个 mixin 名”
常见错误：把 .btn-base 当成变量或配置项来写
很多人误以为 .btn-base 是个“按钮基类”，于是直接在 HTML 里写 class="btn-base"，结果发现样式重复、权重飙升、覆盖困难。其实它根本不是给 HTML 用的，而是供其他 Mixin 或规则内部调用的逻辑单元。
- 错误写法：
<button class="btn-base">点我</button>→ 编译后真生成一个.btn-base类，且可能被多个组件重复引用，导致多份相同 CSS - 正确写法：
.primary-btn { .btn-base(); color: @primary-color; }→.btn-base()只展开一次，样式归入.primary-btn下 - 如果多个组件都写了
.btn-base()，而你又没用guard控制条件，Less 就会原样复制粘贴——所以得配合when限制展开时机，比如.btn-base() when (@env = 'prod')
嵌套中调用 Mixin 导致选择器爆炸的真实原因
不是 Mixin 本身有问题，而是它在嵌套上下文里被“继承”了父级选择器。比如 .card { .btn-base(); } 编译后是 .card .btn-base { ... } ——但你本意只是复用样式，不是新增层级。
- 问题根源：
.btn-base()没用&或作用域控制，直接展开成独立规则，又被外层嵌套包裹 - 安全写法：
.btn-base() { & { display: inline-flex; ... } }，这样调用时始终绑定当前选择器，不会额外加前缀 - 更推荐拆成纯函数型 Mixin：
.flex-center() { display: flex; justify-content: center; align-items: center; }，它不依赖&，调用在哪就在哪生效 - 检查编译结果：搜
.card .btn-base这类长链，如果出现，说明 Mixin 被嵌套“捕获”了，得重构调用方式或改用@import (reference)引入
构建阶段如何验证 Mixin 是否真的被精简掉了
光看 Less 源码没用，必须检查最终生成的 CSS 字节和结构。很多团队以为关了 --compress 就万事大吉，其实冗余早在编译期就埋下了。
立即学习“前端免费学习笔记（深入）”；
- 用
lessc --no-js --strict-math=on button.less --log-level=4查看编译过程，留意 “Mixin not used” 类提示 - 开启
clean-css后仍体积偏大？先跑grep -o "\.btn-base" dist/main.css | wc -l，看是否真有残留 - Webpack 项目中，
mini-css-extract-plugin配合css-loader的exportOnlyLocals: true可阻止未引用的 Mixin 对应样式进入 bundle - 真正难处理的是跨文件调用：A.less 定义
.icon() {}，B.less@import "A"; .user { .icon(); }，C.less 却也@import "A";但没调用 —— 此时 A 里的.icon()仍会被打包，除非用@import (reference) "A"
.modal-header 设计的 .border-shadow()，硬塞进 .tooltip 可能导致边框错位或 z-index 冲突——它节省的是书写量，不是设计判断。要不要复用，得看语义是否一致，而不是看代码行数少了几行。 
