Less 的“解耦”和“组件化”需靠结构约束、命名约定与构建配合实现，禁用全局污染写法，强制唯一根类名嵌套、分层变量管理、正交 Mixin 拆分及显式构建路径配置。
Less 本身不提供运行时作用域，所谓“解耦”和“组件化”不是语法自动带来的，而是靠结构约束、命名约定和构建配合共同实现的。没做对这三件事，写再多 @import 和 .mixin() 也还是全局污染。
组件样式必须用唯一根类名嵌套书写
这是隔离 CSS 作用域最直接有效的手段。不加根类名，.button、input 这类选择器编译后就是全局生效的，改一个按钮可能让表单里的所有 input 变形。
- 每个组件顶层必须有一个稳定、语义化的类名，比如
.search-input-v2或.article-card - 所有内部样式都以它为父级嵌套：
.search-input-v2 { input { ... } .clear-btn { ... } } - 禁用
& + .sibling以外的任意脱离根上下文的写法，例如body &或html &会直接破坏隔离 - 嵌套层级建议 ≤3 层，否则生成的选择器过长（如
.card .card__body .card__body-title），影响渲染性能
变量与 Mixin 必须分层管理，禁止跨组件裸引用
变量不是越多越灵活，而是越聚焦越可控。把 @primary-color 塞进每个组件文件里，等于埋下主题切换失败的伏笔。
- 设计系统级变量（如
@spacing-md、@radius-sm）统一放在variables.less，并通过@import (reference)引入——它不输出 CSS，也不参与变量覆盖 - 组件专属值（如
@card-header-bg）必须带 scope 前缀，且定义在组件文件内部，不暴露、不复用 - Mixin 要正交拆分：
.button-size()只管尺寸，.button-state()只管状态，.button-theme()只管配色；避免一个.btn(@size, @theme)里揉进全部逻辑 - 所有 Mixin 定义加 private 命名前缀，如
.__button-base()，调用时再包一层外壳：.button() { .__button-base(); }
构建链路必须切断隐式依赖
Webpack 的 less-loader 默认不识别 @/styles 这类别名，@import "@/mixins" 报错不是 Less 的锅，是路径没配对。
立即学习“前端免费学习笔记（深入）”；
- 在
less-loader的lessOptions.paths中显式声明解析路径，例如paths: [path.resolve(__dirname, "src/styles")] - 禁止跨组件
@import，比如button/index.less里不能@import "../../shared/mixins"——这会让所有引用 button 的页面都带上.clearfix - 每个组件应有独立入口
index.less，只@import自身目录下的文件，不向上穿透 - 启用
css-modules时，:global(.btn)是例外，不是默认；未加:global的类名才会被自动哈希
真正难的不是写多少 .mixin()，而是每次 @import 前问一句：这个文件是否只服务于当前组件？它的变量和样式有没有可能在别的地方悄悄生效？
