Less mixin 应是正交拆分的组件样式单元，而非功能开关；需用命名空间隔离、参数化控制尺寸/状态/主题，并通过 less-loader 正确配置路径与导入规则保障模块化实效。
Less 的 mixin 不是“功能开关”，而是组件样式的可组合单元；用错方式，模块化就变成文件数量膨胀的假象。
为什么直接写 .btn() mixin 会导致组件样式失控
很多人以为把按钮样式塞进一个 .btn() 就算模块化了，结果改个圆角要翻 12 个文件、换主题时颜色全乱——根本原因是 mixin 没做正交拆分，把尺寸、状态、主题全耦合在同一个函数体里。
常见错误现象：.btn(@size, @theme) 里同时处理 padding、background、:hover 逻辑，导致每次新增一个尺寸变体就得复制粘贴整段代码。
- 尺寸应由独立的
.button-size()控制，只管height/padding/font-size三者联动 - 状态（如
:disabled）必须抽成.button-state()，禁用时用desaturate(@bg, 50%) + fadeout(@text, 30%)而非简单opacity: 0.5 - 主题色不能靠
contrast()自动推导，必须显式传@bg、@border、@text三个参数，否则幽灵按钮文字色会失效
如何用命名空间 + 参数化 mixin 实现真正隔离
Less 没有作用域，所谓“模块化”靠的是人为约定和结构约束。关键不是写多少 mixin，而是它们怎么被调用和包裹。
立即学习“前端免费学习笔记（深入）”；
正确做法：所有组件样式必须包裹在唯一顶层类名下，比如 .ui-kit，且 HTML 容器必须加这个 class；mixin 内部禁止出现裸选择器或 &:hover 嵌套，否则生成的 CSS 会意外泄漏到全局。
- 组件文件开头统一
@import "../core/index";，只引入语义化变量（如@spacing-md）和基础 mixin（如.flex-center()） - 按钮主体用
.ui-kit .button { .button-base(); .button-size(medium); .button-theme(primary); }方式组合，不写&:hover，hover 样式由.button-state()内部封装 - 禁止在
button.less里@import "../../mixins/clearfix"—— 这会让所有引用该按钮的页面都带上.clearfix，破坏依赖边界
Webpack 中 less-loader 配置不当会直接破坏模块化
很多团队写了规范的 mixin 结构，但构建后样式还是撞车、变量找不到，问题往往出在路径解析上。Less 不走 Webpack 的 resolve.alias，@import "@/styles/core" 会直接报 File not found。
典型报错：Cannot resolve variable @text-color，表面是变量缺失，实际是 theme-dark.less 没被正确 @import 进当前编译链路。
- 必须在
less-loader的lessOptions.paths中显式添加路径别名映射，例如paths: [path.resolve(__dirname, "src/styles")] - 禁用
additionalData全局注入，它会强行把变量塞进每个文件，让组件级@local-padding失效 - core 目录下的
variables.less和mixins.less之间禁止互相@import，全部由core/index.less单向导出，否则!default覆盖顺序错乱
真正难的不是写多少 mixin，而是让每个 @import 都有明确意图、每个 @variable 都有清晰生命周期、每个 .button-size() 调用都不依赖上下文——这些细节一旦松动，模块化就退化成带目录结构的混乱。
