Less命名空间需用唯一顶层类名（如.ui-kit）包裹全部组件样式并置于选择器最左端，HTML根容器必须添加该类，避免ID/属性前缀；mixin通过参数+守卫实现可扩展封装；文件组织须用@import (reference)分离变量/mixin与样式，按BEM规范控制优先级。
Less 命名空间怎么写才真正隔离样式？
命名空间本身不是 Less 的原生语法，而是靠嵌套选择器 + 作用域规则模拟出来的。关键在于：用一个唯一的顶层类名（比如 .ui-kit）包裹所有组件样式，并确保它出现在每个选择器的最左侧——否则子选择器可能意外泄漏到全局。
常见错误是只在组件根元素上加命名空间，但内部 & 引用或伪类、伪元素没继承，导致 .button:hover 变成全局生效。正确做法是整个组件块都包裹在命名空间内：
.ui-kit {
.button {
background: #007bff;
&:hover { color: white; }
&--primary { border: 2px solid #007bff; }
}
.input {
padding: 8px;
}
}
- 命名空间类名必须加在 HTML 根容器上（如
<div class="ui-kit">...</div>），否则编译出的 CSS 不会生效 - 避免用 ID 或属性选择器做命名空间前缀（如
#app .button），ID 无法复用，属性选择器难以维护 - 如果项目已用 CSS Modules 或 Shadow DOM，Less 命名空间只是辅助，不能替代作用域机制
混合器（mixin）封装组件时如何传参并保持可扩展？
混合器不是函数，没有返回值，但能通过参数 + @arguments + 守卫（when）实现条件逻辑。封装按钮这类组件时，别把所有变体写死成多个 mixin，而是用一个主 mixin 控制核心样式，再用守卫分发变体：
.button(@type: default, @size: md) when (@type = primary) {
background: #007bff;
border-color: #007bff;
}
.button(@type, @size) when (@size = sm) {
font-size: 12px;
padding: 4px 8px;
}
.button(@type, @size) {
display: inline-flex;
align-items: center;
// 公共样式放这里
}
- 参数默认值要选最常用的一种（如
@type: default），避免调用时强制传参 - 守卫条件必须互斥，否则多个规则同时匹配会导致样式叠加冲突
- 不要在 mixin 内部用
&引用父选择器来“自动挂载”命名空间——它不感知外部嵌套上下文，容易漏掉层级
打包 UI 组件库时，Less 文件怎么组织才不被重复编译？
直接 @import 所有组件文件会导致每次修改一个按钮样式，整个库都被重编译；更糟的是，如果业务代码也 @import 同一个 index.less，变量和 mixin 会被重复定义，引发 Less 编译报错 Variable @color-primary is undefined 或 Mixin .button is not defined。
立即学习“前端免费学习笔记（深入）”；
- 把变量、mixin、工具函数统一抽到
variables.less、mixins.less、utils.less，用@import (reference)引入——它只提供定义，不输出 CSS - 每个组件一个独立文件（如
button.less），只包含样式规则，不@import其他组件 - 对外暴露的入口文件（如
index.less）只做一次聚合：@import "variables"; @import "mixins"; @import "components/button"; - 构建工具（如 webpack + less-loader）需配置
paths指向组件库源目录，让业务代码能直接@import "~@mylib/button";而不拉整个库
为什么用了命名空间和 mixin 还会出现样式优先级冲突？
Less 编译后生成的 CSS 优先级完全取决于选择器结构，跟源码是否模块化无关。比如 .ui-kit .button:hover 和第三方库的 button:focus 碰上，后者反而更高（元素选择器 vs 类+伪类）。命名空间解决的是“作用域污染”，不是“优先级压制”。
- 避免深度嵌套（如
.ui-kit .form .field .input:focus），它会让选择器过长、优先级虚高，且难覆盖 - 用 BEM 命名规范约束组件内部结构，减少依赖层级关系，例如
.ui-kit__button--large比.ui-kit .button.large更可控 - 如果必须覆盖第三方样式，优先用
!important+ 明确注释（如// 覆盖 antd 默认 focus 样式），而不是盲目加深嵌套
真正麻烦的从来不是怎么写 Less，而是当设计系统升级、主题切换、暗色模式介入时，变量作用域和 mixin 参数传递链会突然断裂——这时候你才会发现，当初少写的一个 (reference) 或多嵌的一层 .theme-dark 就是雷。
