Less嵌套通过自动添加顶层类名前缀实现样式隔离，但需顶层用业务语义类名（如.user-profile-card）、避免过深嵌套（≤4层）和慎用extend；应优先用带guard条件的mixins和自定义函数控制变量，构建时拆包才能真正隔离样式。
Less嵌套规则如何天然隔离样式作用域
Less的嵌套不是语法糖，是作用域控制的第一道防线。写在.module-a { }里的所有选择器，编译后自动带上.module-a前缀，不手动拼接就不会漏出到全局。
常见错误是以为嵌套能“完全”隔离——其实只要顶层选择器本身没加唯一类名（比如用了div或button这种泛型标签），编译后照样可能撞车。
- 顶层容器必须用带业务语义的类名，如
.user-profile-card，不能只写card - 嵌套层级别太深，超过4层容易让生成的选择器过长，影响CSS匹配性能
- 避免在嵌套里直接写
&:hover以外的伪类组合，像&:hover::before在某些Less版本里会编译异常
用extend代替mixins复用样式时的陷阱
extend看起来省事，但它是静态匹配选择器文本，不是运行时继承。一旦目标选择器被重命名或加了新类，extend就失效，而且不会报错。
典型场景：多个组件都要灰色边框，你写了.border-gray { border: 1px solid #ccc; }，然后在.btn里&:extend(.border-gray)——结果.btn样式没变，因为编译器根本没找到.border-gray这个完整字符串（可能它被包裹在.form-module里了）。
立即学习“前端免费学习笔记（深入）”；
-
extend只匹配编译前的原始选择器文本，不认嵌套上下文 - 跨文件
extend必须确保被继承的选择器定义在@import之前，且未被css模式导出 - 优先用
mixins传参控制颜色/尺寸，比extend更可控、调试更直观
如何用guard和functions避免重复定义主题变量
Less没有真正的模块作用域，变量一定义就全局可见。靠guard条件判断+functions封装，才能让同一份变量在不同模块里产出不同值。
比如按钮颜色：你不能写两遍@primary-color: #007bff;，而应该定义一个.get-btn-color(@theme) when (@theme = dark) { color: #fff; }，再在各模块里调用.get-btn-color(dark)。
- 变量名别带
module-前缀，那只是心理安慰，实际仍可被覆盖 -
guard必须写全比较运算符，when (@theme = dark)不能简写成when (@theme = dark)（注意空格和等号两边），否则不生效 - 自定义函数返回值类型要明确，
unit(16px, px)比硬写16px更安全，避免单位混用导致计算失败
编译后CSS文件体积暴增？检查avoid-extend和inline策略
Less默认把extend展开为完整选择器列表，一个.icon被5个模块extend，最终CSS里就出现5次.icon的完整规则，哪怕它们本该共用一套声明。
这不是bug，是设计使然——Less不分析语义，只做字符串匹配和替换。所以模块越多，重复越多，gzip也压不住。
- Webpack中用
less-loader时，加javascriptEnabled: true才能启用guard和复杂函数，但会关闭部分安全校验 - 生产环境务必开启
clean-css压缩，否则嵌套生成的长选择器会让文件膨胀2–3倍 - 真正隔离样式，得靠构建时拆包（如每个模块单独
.less+extract-text-webpack-plugin），而不是单靠Less语法
Less的作用域是“写的时候好管”，不是“跑的时候安全”。编译完的CSS没名字空间，所有防护都建立在人不手误、工具链不掉链子的基础上。
