Less变量未生效是因编译期静态替换特性导致的作用域或顺序问题：变量须在使用前定义，避免被覆盖或嵌套中重复声明；嵌套不宜超3层；mixins适合参数化复用，extend慎用于跨文件及高权重场景；体积膨胀主因是滥用mixins而非Less本身缺陷。
Less变量定义后为什么没生效？
常见现象是改了@primary-color但按钮颜色没变，本质是变量作用域或编译顺序问题。Less变量不是运行时动态值，而是编译期静态替换，一旦在某个作用域被覆盖（比如后面又写了@primary-color: #ff6b35;），前面的就失效。
- 变量必须在使用前定义，且不能依赖后续文件中的同名定义
- 用
@import引入变量文件时，确保它排在所有引用它的样式文件之前 - 避免在嵌套规则里重复声明同名变量——这会创建局部作用域，外部看不到
- 调试技巧：临时加一句
.debug { color: @primary-color; }放在全局末尾，看是否输出预期值
嵌套规则写多了反而更难维护？
嵌套本身不坏，但超过3层就会让选择器路径过长、复用性下降，还容易触发CSS specificity陷阱。比如.header .nav .item .link:hover这种生成结果，既难覆盖，也难抽离。
- 只对真正有父子/层级语义的地方嵌套（如
.card { .card-header {} .card-body {} }） - 避免为“看起来整齐”而嵌套，例如把所有按钮样式塞进
body下嵌套 - 用
&代替重复父选择器，但别滥用：.btn { &:hover { ... } &.disabled { ... } }比写两遍.btn干净，但.section { & > h2 { ... } & > p { ... } & ul { ... } }已接近临界点 - 超过3层嵌套时，优先考虑拆成独立class或用
mixins
mixins和extend哪个更适合抽象公共样式？
两者都能减少重复，但行为完全不同：.clearfix()是复制样式块，:extend(.clearfix)是合并选择器；前者灵活，后者影响最终CSS体积和可读性。
- 用
mixins处理含参数的逻辑（如.border-radius(@r: 4px)）或需独立控制的样式组合 -
extend适合纯语义化归类，比如多个组件都要“表现得像一个禁用态”，且你确认它们永远共用同一套基础声明 - 慎用
extend跨文件调用——编译器可能找不到目标选择器，报Unknown pseudo-class or pseudo-element extend - 注意
extend会提升选择器权重，.btn:extend(.disabled)实际生成的是.btn, .disabled，若.disabled本身带权重，会连带拉高.btn
编译后CSS体积暴增，是不是Less本身有问题？
不是Less的问题，是嵌套+mixins+import方式不当导致冗余输出。一个.btn mixin被10个地方调用，就可能生成10份完全相同的CSS块。
立即学习“前端免费学习笔记（深入）”；
- 检查是否误把
mixins写在循环或条件逻辑里（Less不支持运行时分支，但错误结构会导致意外重复） - 用
lessc --clean-css或构建工具插件做压缩，但治标不治本 - 高频复用的视觉原子（如阴影、过渡）建议统一用
mixins，而非直接写属性；但整块组件样式（如.modal）更适合抽成独立.less文件+@import - 开启
lessc --strict-math=on能提前暴露数学表达式错误，避免因计算异常导致样式错位进而补一堆hack
