Less无真正命名空间，需用带括号的#namespace()定义mixin组，避免无括号写法生成空选择器；调用必须用#namespace > .mixin，变量和mixin参数无作用域隔离，须加模块前缀并配合@import (reference)控制导入。
Less 里没有真正的命名空间机制，所谓“封装”靠的是显式前缀 + 作用域约束 + 导入控制。直接写 #ui() 或 .ui() 不等于隔离，不加约束照样撞车、泄露、重复输出。
怎么写命名空间才不会生成多余 CSS 规则
用 #namespace()（带括号）定义，而不是 #namespace（无括号）。后者会被编译成真实选择器，比如 #namespace {}，哪怕里面全是 mixin，也会输出空规则污染 CSS。
-
#button() { .primary() { background: #007bff; } }→ 安全：只定义，不输出 -
#button { .primary() { ... } }→ 危险：编译后多出#button{}空块 - 调用时必须用
#button > .primary，不能漏掉>，否则会把.primary插入当前上下文，可能意外提升权重或泄漏层级 - 如果项目已用 CSS Modules 或 Shadow DOM，
#button()只是辅助，别指望它替代作用域
Mixin 命名空间如何避免参数和变量冲突
命名空间本身对变量和 mixin 参数**完全无效**——#theme() { @color: red; } 里的 @color 和顶层 @color 是同一个变量，不是局部作用域。
- 所有跨文件共享的变量，必须加模块前缀：
@btn-bg、@form-padding-xs，禁用泛义名如@primary - 参数化 mixin 必须显式设默认值：
.button(@bg: #007bff, @size: md)，否则调用时漏传会静默失败或编译报错 - 不要在命名空间内定义通用工具 mixin（如
.hide()），统一收口到_utils.less，全部以.hide()（点开头）形式定义，靠文件级隔离 -
@import (reference)能防止样式重复输出，但**不阻止变量覆盖**——它只是让被导入文件的变量/mixin 进入当前作用域
为什么 & 在命名空间里调用会出问题
& 是 Less 的父选择器引用符，但它会“逃逸”命名空间边界。比如在 .card { #button > .primary; } 中调用，.primary 内部若含 &:hover，最终生成的是 .card .button:hover，而不是预期的 .button:hover。
立即学习“前端免费学习笔记（深入）”；
- 私有 mixin 内禁止使用
&，改用显式类名拼接：.button--primary:hover - 需要条件变体时，用
when守卫，不用嵌套：.button(@type) when (@type = primary) { background: #007bff; } - 如果组件需挂载到
body（如弹窗），命名空间类必须手动加到该元素上，否则.my-kit .button根本不匹配 - 别依赖
&实现“自动继承父类”，它不可控，优先用 BEM 类名组合（button button--large）
大型项目中 Mixin 命名空间的实际组织方式
真实项目里没人靠单个 #ui() 撑全场。有效做法是分层 + 文件级收敛 + 构建约束。
- 目录结构按功能切分：
mixins/_buttons.less、mixins/_layout.less，每个文件只暴露一个主 mixin：.btn()、.grid() - 所有 mixin 定义前加语义前缀：
.btn-primary()、.grid-col()，不依赖命名空间“兜底” - 基础变量统一放
variables/_base.less，组件变量放各自 mixin 文件里，且带前缀：@btn-height: 36px; - Webpack 中配置
less-loader的math: always，避免extend和计算表达式冲突（尤其递归 extend 报错）
