less 命名空间本质是选择器前缀而非作用域机制，调用失败主因是html未加外层类或嵌套中漏用&；变量无局部作用域，需加前缀或通过mixin参数传递，@import(reference)不隔离变量。
Less 命名空间不是语法，调用失败本质是选择器没生效
Less 没有 @namespace 或 namespace 关键字，所谓“命名空间”只是靠外层类名包裹实现的视觉隔离。你写 .ui-kit { .button { ... } }，编译后生成的是 .ui-kit .button——它不创建作用域，只加前缀。调用失败，90% 是因为 HTML 根容器没加那个类，或者嵌套中漏了 & 导致选择器拼接错位。
- HTML 必须显式加类：
<div class="ui-kit">...</div>，否则 CSS 完全不匹配 -
&只控制选择器拼接，不继承变量或作用域；.ui-kit { .btn { &:hover { ... } } }编译为.ui-kit .btn:hover，但.ui-kit { .btn { &__icon { ... } } }才生成.ui-kit .btn__icon - 避免用 ID 或属性选择器做“前缀”，如
#app .button—— ID 无法复用，且破坏组件可移植性 - 如果用了 CSS Modules 或 Shadow DOM，Less 命名空间仅作辅助，不能替代真实作用域机制
@import (reference) 不解决命名空间变量冲突
很多人以为把变量塞进 @import (reference) "vars.less" 就能“封装命名空间”，结果还是全局覆盖。事实是：@import (reference) 只跳过 CSS 输出，变量和 mixin 仍注入当前作用域——它不隔离，只静默。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 变量永远按定义顺序线性覆盖：
buttons.less里写@primary-color: #e74c3c;，后续所有文件（哪怕在.ui-kit块里）都用这个值 - 安全做法是加前缀：
@btn-primary-bg、@modal-header-padding，杜绝泛义名如@color、@size - 别在命名空间块内声明变量：
.ui-kit { @primary-color: red; .button { color: @primary-color; } }—— 这个@primary-color和文件顶部声明完全等价，既不私有也不受嵌套限制 - 跨文件共享变量，必须单点定义（如
variables.less），其他地方只读不写；组件定制色应通过 mixin 参数传入，而非改全局变量
混用 CSS Modules 时，.module.less 后缀必须配对 loader 链路
Less 文件默认不走 CSS Modules 流程。你写了 Button.module.less，但 Webpack/Vite 没配置好链路，结果类名还是 .button 而非 Button_module__abc123 —— 这不是 Less 问题，是构建配置断链。
- Webpack 中需确保
less-loader输出被css-loader?modules接收；Vite 中要配css.modules.generateScopedName - Umi 用户需显式开启
cssModulesExcludes: []，否则.module.less默认不启用 Modules -
composes是 CSS Modules 语法，Less 解析器不认识，写进.less文件直接报ParseError: Unexpected token 'composes' - 第三方库（如 Ant Design）的
@import '~antd/lib/style/themes/default.less'是全局引入，其变量和样式无法被 CSS Modules 隔离，需用:global()或按需引入
真正防污染：用 mixin + 参数替代“命名空间变量”
Less 本身无法实现 JS 式局部作用域。想让按钮样式不被标题样式干扰，靠 .ui-kit 包裹不如靠 .btn-style() 封装——变量传进来，样式吐出去，无副作用。
- 写成：
.btn-style(@bg: #007bff, @text: #fff) { background: @bg; color: @text; }，调用时.btn-style(#52c418);，变量生命周期仅限本次调用 - 守卫（
when）用于分支逻辑：.btn-style(@type) when (@type = primary) { ... }，但条件必须互斥，否则样式叠加 - 避免深层嵌套定义变量：
.card { @padding: 16px; &__header { padding: @padding; } &__body { @padding: 24px; padding: @padding; } }—— 第二个@padding会覆盖第一个，&__header实际用 24px - 需要局部间距？别用同名变量，改用 map：
@spacings: { header: 16px, body: 24px };，再用map-get(@spacings, header)
.module.less，要么下沉到 JS 层用 CSS 自定义属性驱动。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
