less中:extend()不生效最常见原因是目标选择器未声明或未@import引入；它仅编译期字符串匹配，不支持跨文件隐式引用、媒体查询内选择器或伪类作为扩展目标。
Less中:extend()不生效导致选择器重复
最常见的情况是写了.btn-primary:extend(.btn)，但编译后.btn和.btn-primary仍各自输出——这不是bug，而是:extend()根本没匹配上。它只在编译期做字符串级匹配，且要求目标选择器必须已声明、在同一文件或被@import显式引入。
- 跨文件未
@import：按钮样式在button.less里，:extend(.icon)却指向icon.less中定义的.icon→ 编译报错Extend directive references selector that is not declared - 目标被包裹在
@media或嵌套块内：@media (min-width: 768px) { .btn { ... } }→ 外部无法:extend(.btn) - 用了伪类当目标：
.btn:hover:extend(.btn)直接报错，因为:hover不是合法的选择器目标；正确写法是让.btn内部定义&:hover，再用.btn-primary:extend(.btn)
.mixin不加括号导致空选择器污染
写.btn-base { ... }（无括号）会被Less当成普通CSS类，哪怕从没调用过，也会输出.btn-base { }空规则。多个组件都调用.btn-base()时，反而叠加出一份空规则+多份展开样式，体积不减反增。
- 必须写成
.btn-base() { ... }定义，调用时也必须带括号：.btn-primary { .btn-base(); } - 搭配
@import (reference)可抑制顶层输出，但不影响调用逻辑；注意(reference)只管导入行为，不改变mixin本身是否展开 - 嵌套中调用会自动拼接父选择器：
.card { .btn-base(); }→.card .btn-base { ... }，这不是你想要的复用，而是意外生成新选择器
嵌套过深 + &误用放大选择器冗余
嵌套本身不坏，但&用错位置会让选择器结构失控。比如.modal { .close { ... } }本意是“modal里的close”，结果写成.modal { &.close { ... } }就变成.modal.close（同一元素需同时有俩类），语义全偏。
- 后代关系不用
&：.btn { span { color: red; } }→.btn span - 拼接类名或伪类才用
&：.btn { &:hover { ... } &__icon { ... } }→.btn:hover和.btn__icon - 超过3层嵌套（如
.page .content .article h2）会导致编译后选择器过长，浏览器匹配变慢，DevTools调试困难；检查方法：编译后搜{前空格数，超6个基本就是失控了
真正该用:extend()还是.mixin()？
选哪个不看“能不能”，而看“要不要复用选择器本身”。:extend()压缩的是选择器列表长度，.mixin()复制的是样式声明块——两者解决的是不同维度的冗余。
- 用
:extend()：统一状态类（.disabled、.sr-only）、布局工具类（.clearfix），目标是最终CSS里只有一条.disabled, .form-input, .btn { ... } - 用
.mixin()：需要传参（.border-radius(@r)）、条件判断（when (@theme = dark)）、或生成多套变体；别指望:extend()处理带变量的逻辑 - 混用风险：
.a:extend(.b) { .c:extend(.b) }可能触发Less 4.0+循环警告，即使实际没循环；IE8不支持逗号分隔的多选择器共用样式，用了:extend()等于放弃IE8
复杂点在于：:extend()静默失效，.mixin()盲目展开，嵌套里&一错就全偏——它们都不报错，只默默产出冗余CSS。调试时得盯着编译后的结果反推，而不是信源码缩进。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
