less mixin 必须加括号声明（如.btn-base()），否则编译为空规则；所有参数需设默认值且优先绑定设计变量；全局变量文件须最先@import，否则默认值静默失效。
Less Mixin 不加括号就报错或输出空规则
定义 .btn-base 而不是 .btn-base()，Less 会把它当普通 CSS 类处理——哪怕从没调用，也会编译出 .btn-base { } 这种空规则，白占体积、污染选择器命名空间。尤其在 Webpack/Vite 全局引入 mixins 文件时，这类“伪 mixin”会被打包进最终 CSS。
必须统一用括号声明：.btn-base()。它只在被显式调用（如 .primary-btn { .btn-base(); }）时才展开样式，定义本身不产出任何 CSS。
- 用 VS Code 搜索
\.([a-zA-Z0-9\-]+)\s*\{快速定位漏括号的规则 - Vue/React scoped 样式下更要小心：无括号写法可能被误认为真实 class，导致意外全局泄漏
- 所有
@import的 mixins 文件里，.clearfix这类都要改成.clearfix()
参数没设默认值，编译直接中断，不是警告
.button(@bg, @border, @color) 这样三个参数全无默认值，调用 .button(#007bff) 就会报 Expected 3 arguments, but got 1。Less 没有运行时兜底逻辑，漏传且没设默认值，编译器立刻抛出 variable @border is undefined 错误，整个构建失败。
所有参数都必须显式设默认值，哪怕只是 @radius: @border-radius-base 或 @state: normal。混用（比如只给后两个设默认值）会导致调用逻辑混乱，.button(medium) 里的 medium 会被当第一个参数 @bg 值，@size 反而变成 undefined。
- 默认值优先绑定设计变量（如
@bg: @color-primary），而不是写死#007bff，否则主题切换失效 - 避免在默认值里写复杂表达式，比如
@padding: unit(1em * 1.2, em)—— 计算时机不可控，易出单位错误 - 颜色类参数建议用
lighten()/darken()生成，让默认值真正“可主题化”
传参跳过中间项？Less 不支持，得换思路
Less 不支持命名传参，也不允许位置跳过。你不能写 .button(@color: #333) 或 .button(#007bff, , #fff)。想只改一个参数，只有两种安全做法：
-
拆正交维度：把尺寸、状态、主题分开成独立 mixin，比如
.button-size(small)+.button-state(disabled)，比堆一堆参数更可控 - 重载定义：写多个同名 mixin，参数数量不同，靠匹配优先级区分（先写参数多的），但要注意顺序和维护成本
- 结构化参数（如用
map+extract()）会牺牲可读性，仅适合高阶封装，日常开发别碰
语义化命名比顺序更重要：用 @variant: default 而不是 @bg-color，后续加 ghost 或 outline 变体时，调用方式不用变。
默认值生效的前提：变量文件必须最先 @import
Less 变量作用域是“最后定义生效”，但 mixin 调用时读的是**调用时刻**的变量值，不是定义时的。如果 @color-primary 在 mixin 定义之后才被覆盖（比如主题文件 @import 在后面），那所有已定义的 mixin 仍用旧值。
全局变量文件（如 variables.less）必须在所有 mixin 文件之前 @import。组件级 mixin 文件里别重复声明 @color-primary，否则会屏蔽外层变量。
真正容易被忽略的，是默认值和变量作用域的耦合关系——它不报错，但样式静默失效，你得比对编译后的 CSS 才能发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
