less中无原生namespace语法，所谓“命名空间”实为通过嵌套规则（如.my-button-kit { &.btn { ... } }）或参数化mixin（.make-ns(@ns)）在编译期注入前缀，生成带统一前缀的选择器以规避全局污染，本质是文本级前缀拼接而非作用域隔离。
Less 中没有原生 namespace 语法，但可以用嵌套规则模拟
Less 本身不支持像 CSS Modules 或 Sass 的 @namespace 那样的作用域声明。所谓“命名空间”，实际是靠 & 嵌套 + 前缀类名实现的局部作用域隔离。核心思路是：把一组样式包裹在一个顶层选择器下，让所有子类自动带上该前缀。
例如你有一组按钮组件样式，想避免污染全局 .btn，可以这样写：
.my-button-kit {
&.btn {
padding: 8px 16px;
border: 1px solid #ccc;
}
&.btn-primary {
background: #007bff;
color: white;
}
}
编译后生成的是 .my-button-kit.btn 和 .my-button-kit.btn-primary，天然形成隔离。这不是运行时命名空间，而是编译期前缀注入。
用参数化 mixin 实现可复用的“伪命名空间”封装
如果多个模块都需要类似隔离逻辑，硬写嵌套太重复。这时用 mixin + 参数控制前缀更灵活：
.make-ns(@ns) {
@{ns} {
&.icon { display: inline-block; }
&.icon-close { background: url('close.svg'); }
}
}
.make-ns('.ui-dialog');
.make-ns('.ui-toast');
编译后分别产出 .ui-dialog.icon 和 .ui-toast.icon。注意：@{ns} 是变量插值，必须用引号包裹选择器字符串；& 在 mixin 内仍有效，能正确拼接子类。
常见错误：
- 忘记给
@ns加引号（如写成.make-ns(.ui-dialog)），Less 会报错Expected ')' got '.' - 在 mixin 外部调用时漏掉括号，写成
.make-ns '.ui-dialog'，导致解析失败
警惕嵌套过深导致的选择器权重失控
用嵌套模拟命名空间时，层级一多，CSS 特异性（specificity）就飙升。比如三层嵌套：.page .section .my-widget .btn，权重高达 0,3,0,0，后续想用简单类名覆盖它几乎不可能。
建议约束嵌套深度：
- 最多两层：顶层命名空间 + 一级子类（如
.card {.title}→.card.title） - 避免在命名空间内再用标签或属性选择器（如
input[type="text"]），它们会进一步拉高权重 - 需要修饰状态时，优先用 BEM 式后缀（
.btn--disabled）而非新增嵌套层级
否则后期维护时，开发者只能靠 !important 硬压，违背初衷。
与 CSS Modules / PostCSS 插件的本质区别
Less 的“命名空间”只是文本级前缀拼接，不解决模块间依赖、哈希化、tree-shaking 等问题。它和真正的 CSS 模块化方案有根本差异：
- CSS Modules 会在构建时将
.btn编译为_btn_abc123，并导出映射对象；Less 不生成新类名，也不提供 JS 层引用能力 - PostCSS 插件如
postcss-prefixwrap可对整段 CSS 做前缀包裹，但它是后处理，无法像 Less 那样在变量、mixin 中动态参与逻辑 - 如果你项目已用 Webpack + CSS Modules，强行在 Less 里搞命名空间反而增加认知负担，不如直接用
:global()控制局部穿透
真正关键的不是“有没有 namespace”，而是团队是否统一了类名组织规则——BEM、SuitCSS 或简单前缀，只要一致，Less 就能配合得很好。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
