Extend生成联合选择器，Mixin生成重复样式块；前者合并选择器减少体积，后者复制规则易致冗余，且Extend不支持伪类、变量与条件逻辑，Mixin则全支持。
Extend生成的是联合选择器，Mixin生成的是重复样式块
这是最根本的区别，直接决定最终CSS体积和调试难度。:extend()会把多个选择器合并成一行声明，比如.btn-primary和.my-btn:extend(.btn-primary)编译后变成.btn-primary, .my-btn { color: #007bff; }；而.my-btn() { color: #007bff; }调用一次，就输出一次完整规则，调用十次就是十套一模一样的color声明。
常见错误现象：.button-variant(@color)在循环中被调用20次，结果CSS里出现20组几乎相同的padding、border、transition块——gzip也压不掉这种结构冗余。
- Extend适合多个类共用完全一致的静态样式（如
.text-center、.d-flex） - Mixin适合需要差异化输出的场景（如不同尺寸的
.col(@span)） - 项目里大量用Mixin生成按钮变体，却没意识到CSS体积已翻3倍以上
Extend不支持伪类、变量和条件逻辑，Mixin全支持
:extend()是编译期静态匹配，它只认“字符串完全一致”的选择器。你不能写.item:hover:extend(.base:hover)，Less会报错Extend syntax is not allowed in pseudo-classes；也不能写.x:extend(.btn-@size)，变量在:extend()里无效。
而.rounded(@r: 4px) { border-radius: @r; }这类Mixin可以传参、嵌套、配合if()做分支，甚至能放进@media里动态计算。
立即学习“前端免费学习笔记（深入）”；
- 想让不同状态下的组件共享基础样式？只能用Mixin +
&:hover组合 - 需要根据断点调整布局？
@media内无法用:extend()继承断点内的规则 - 试图在
&:extend()里写&:hover或[data-theme]，结果编译静默失败
Extend必须依赖显式定义的选择器，Mixin不依赖上下文
:extend()不是作用域查找，它靠字符串精确匹配。如果.btn只存在于@import (reference) "utils"里，那它“可见但不输出”，:extend(.btn)就会找不到目标，报Unknown error occurred。
Mixin则没这限制：只要.btn() { ... }定义过，就能在任意位置调用，哪怕它藏在另一个@import (reference)文件里。
- 被继承的选择器必须在当前文件或
@import (once)引入的文件中真实存在且已定义 -
.x:extend(.utils > .text-muted)要求.utils > .text-muted这个完整选择器必须作为独立规则出现过 - 写成
.utils .text-muted或.utils.text-muted都不匹配
混合使用时，优先用@import (reference) + Mixin，慎用Extend链式扩展
很多人想靠A:extend(B):extend(C)实现多层继承，但旧版本Less会顺序错乱，新版本也可能触发二次扩展——比如.c:extend(.a)可能意外拉进.b的规则，导致.c, .a, .b并列输出，完全脱离设计意图。
真正可控的方案是：@import (reference)引入基础样式，再用参数化Mixin按需注入。比如把按钮基础样式抽成.btn-base()，颜色/尺寸/状态都通过参数控制，既避免选择器爆炸，又保留动态能力。
容易忽略的点：Extend看似省体积，但一旦目标类含display: flex或position: absolute这类全局性声明，被多个组件继承后极易覆盖预期布局——这种副作用不会报错，只能靠肉眼比对编译后的CSS确认。
