less mixin复用困难的根本原因是缺乏显式契约和作用域控制；应使用@import (reference)、语义化命名空间、参数map传值、显式变量依赖及严格守卫条件来解决。
Less mixin 库复用困难，根本不是“写得不够多”，而是库本身缺乏显式契约和作用域控制——直接 @import 一堆 mixins.less，等于把变量、参数、依赖全扔进全局汤里煮，谁先谁后、谁覆盖谁，全靠运气。
为什么 @import "mixins" 会导致样式行为不可控
Less 的 @import 是纯文本拼接，没有模块隔离。如果 components/button.less 和 pages/dashboard.less 都写了 @import "mixins/flex"，而这个文件又依赖 @primary-color，那最终 @primary-color 的值就取决于这两个文件在编译队列里的顺序。
- 现象：同一套
.flex-center()在按钮里居中，在卡片里却左对齐 - 原因：前者导入了
variables-light.less，后者导入了variables-dark.less，但mixins/flex.less没声明它需要哪个变量文件 - 解法：改用
@import (reference) "mixins/flex"—— 不输出 CSS，只提供调用能力；所有变量依赖必须由调用方显式传入或提前声明
.ui.button() 这类命名空间 mixin 怎么避免撞车和泄漏
不加前缀的 .button() 在中大型项目里必撞车。更危险的是，它可能悄悄覆盖掉其他团队定义的同名 mixin，且编译器不报错。
- 必须用语义化命名空间包裹，比如
.ui.button()、.layout.grid()，而非.button() - 命名空间本身可带参数：
.theme(@mode) { .theme-@{mode} { @content; } }，调用.theme(dark)生成.theme-dark选择器 - 禁止在 mixin 内部直接引用未声明的变量（如
@border-radius），全部通过参数传入：.ui.button(@radius: 4px, @color: @ui-primary) - Webpack/Vite 中配
resolve.alias["@mixins"] = "src/styles/mixins"，调用时统一写@import (reference) "@mixins/ui"，杜绝../../../mixins/ui路径爆炸
参数膨胀到 5 个以后，.button(@a, @b, @c, @d, @e) 还怎么安全调用
位置参数一旦超过 3 个，漏传、错序、默认值不一致就会变成常态。编译器不会提示 @d 是圆角还是禁用态，只会默默生成错误 CSS。
- 立刻停用纯位置参数，改用 Map：
.ui.button(@config)，内部用map-get(@config, "rounded", false)取值 - 调用时写成
.ui.button(("color": red, "rounded": true, "size": "lg"))，语义清晰，增减字段不影响旧调用 - 别在 mixin 里做类型转换（如把字符串
"12px"强转为数字），参数类型必须与定义严格一致；单位统一用变量（@spacing-sm），不传带单位字符串 - 守卫条件中字符串必须加英文引号：
& when (map-get(@config, "state") = "disabled")，写成= disabled会被当变量名解析
调试时发现 .shadow() 生效了但 .rounded() 消失了，怎么定位
这不是 mixin 失效，而是两个 mixin 都设置了 border-radius，后调用的完全覆盖了前一个——Less 不合并属性，只按顺序输出。
- 检查调用顺序：
.rounded(8px); .shadow(2px);→border-radius正常；反过来就丢失 - 嵌套中调用必须带
&：.card { &:hover { .rounded(4px); .transition(); } }，漏掉&会生成全局:hover规则，脱离上下文 - 高频共用属性（如
transition、border-radius）应拆成独立小 mixin，避免大而全的.card-base()，方便按需组合 - 编译后看 CSS 输出：搜索
.card:hover下是否真有border-radius，没有就说明&漏了，或被后续 mixin 覆盖
最易被忽略的点是：mixin 不是函数，没有执行栈，没有返回值，它只是把一段文本粘贴到调用位置。所谓“复用”，本质是控制这段文本的注入时机、作用域和参数契约——没契约，就只剩复制粘贴的幻觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
