Less命名空间本质是通过顶层唯一类名（如.ui-kit）包裹样式实现前缀模拟，必须将该类名加到DOM根容器上才生效，否则完全失效；@import(reference)是复用关键，普通@import会导致样式重复。
Less 本身没有命名空间机制，所谓“命名空间”是靠嵌套选择器 + 顶层唯一类名模拟出来的前缀拼接行为。它不隔离作用域，只加前缀；没加到 HTML 容器上，就完全失效。
命名空间怎么写才真正起作用
本质就是用一个业务语义明确的顶层类名（如 .ui-kit 或 .article-card）包裹所有内部样式，并确保这个类名出现在每个编译后选择器的最左侧。
- 正确写法：
.ui-kit { .button { color: blue; } .input { border: 1px solid #ccc; } }→ 编译出.ui-kit .button和.ui-kit .input - 错误写法：
.ui-kit { button { color: blue; } }→ 编译出.ui-kit button，这是后代选择器，button仍可能被全局规则干扰 - 必须把
class="ui-kit"加到实际 DOM 根容器上，比如<div class="ui-kit"><button class="button"></button></div> - 禁止在块内写
html、body、#app或[data-id]这类选择器，它们会逃逸前缀，直接污染全局
@import (reference) 是命名空间能复用的关键
如果你把 mixin 或变量定义直接 @import "mixins/buttons.less"，它们会被原样贴入并输出 CSS，导致重复声明；而 @import (reference) "mixins/buttons.less" 只引入定义，不生成样式，让 mixin 调用时能自然继承当前命名空间上下文。
- 变量统一放在
variables.less，用@import (reference)引入，别塞进命名空间块里——变量无作用域，嵌套不改变可见性 - mixin 定义也放
mixins/下，用(reference)导入；调用则放在命名空间块内，比如.ui-kit { button { .button(primary); } } - 误用普通
@import引入 mixin 文件，多个组件都这么干，最终 CSS 里会出现十几份一模一样的.clearfix
为什么写了命名空间还是冲突？常见漏点
命名空间不是魔法，它只解决“同名类撞车”问题，对没加前缀的第三方规则（比如 Bootstrap 的 .btn）或动态注入的 SDK 浮层毫无防御力。
立即学习“前端免费学习笔记（深入）”；
- HTML 容器没加顶层类名 —— 所有样式都不生效
- 动态挂载的组件（如 toast、modal）挂到
document.body，但没手动补class="ui-kit" - 用了
&:hover正常，但写了body &或& + .sibling外部兄弟，前缀就断了 - 守卫条件没互斥，比如两个
.button(@type) when (@type = primary)同时匹配，样式叠加错乱 - 用
extend复用，结果目标选择器被包裹在别的命名空间里，文本匹配失败，且不报错
真正麻烦的是那些你控制不了的第三方 CSS：没源码、没前缀、还内联。这时候命名空间已经帮不上忙，得靠优先级硬控或运行时 patch，而不是继续在 Less 里加嵌套。
