:extend() 合并选择器以减少体积，mixin 复制样式支持参数但易膨胀；前者适合固定样式复用，后者适用于动态定制，二者可混合使用。
Extend生成的CSS是选择器合并，Mixin是样式复制
这是最根本的区别，直接决定最终CSS体积和维护成本。:extend() 编译后会把多个选择器“拉到一起”，比如 .btn-primary 和 .my-btn:extend(.btn-primary) 会输出 .btn-primary, .my-btn { color: #007bff; ... }；而 .my-btn() { color: #007bff; } 调用一次，就原样复制一套规则，调用十次就是十套重复声明。
常见错误现象：项目里大量用 .button-variant() 这类 Mixin 生成不同颜色按钮，结果编译出几百行几乎相同的 background、border、:hover 块——体积翻倍，gzip 也压不掉冗余结构。
-
:extend()不支持传参，只能继承已定义好的完整样式块 - Mixin 支持参数、条件判断、循环，适合动态生成（比如根据 $size 输出不同 padding）
- 如果只是复用固定样式（如
.text-center、.d-flex），优先用:extend()
Extend要求被继承的选择器必须显式存在且定义在前
:extend() 不是作用域查找，而是字符串匹配。它不会跨文件找，也不会“猜”你是不是想继承 .btn —— 如果 .btn 是通过 @import (reference) 引入的，那它可见但不输出；如果没加 (reference)，又没在当前文件定义，就会报 Unknown error occurred。
容易踩的坑：
- 在
.a:extend(.b)之前没写过.b { ... }，或只写了.b:hover却想 extend.b - 试图 extend 伪类，比如
.x:extend(.btn:hover)—— Less 不允许，会静默失败或报错 - 路径写错：
.x:extend(.utils > .text-muted)要求.utils > .text-muted必须作为完整选择器出现过，不能是.utils .text-muted
Mixin多次调用导致CSS体积膨胀，但更灵活
当你需要根据变量控制样式细节时，Mixin 是唯一选择。例如写一个响应式栅格系统：.col(@span: 12) { width: percentage(@span / 12); }，.col(4) 和 .col(8) 产出的 width 值完全不同，Extend 做不到这点。
但代价是：每个调用都展开全部内容。哪怕只改一个 color，整个 box-shadow、transition、@media 块也会照搬。
- 避免在循环中无节制调用带复杂逻辑的 Mixin
- 可配合
!important或 guard（匹配模式）做轻量分支，比全量展开更可控 - 如果某 Mixin 只用于生成固定几组样式（如主题色），考虑拆成多个独立 class +
:extend()组合
混合使用场景：何时该选Extend，何时该选Mixin
真实项目里不是非此即彼。关键看「样式是否随输入变化」：
- 固定样式复用（按钮基类、文字对齐、工具类）→ 用
:extend()，省体积、易维护 - 需参数定制（尺寸、颜色、圆角、断点）→ 用 Mixin，否则得手写几十个 class
- 想兼顾两者？可以 Mixin 生成基础 class，再让业务 class
:extend()它，比如.btn-base() { ... }→.btn-primary { .btn-base(); color: blue; }→.my-btn:extend(.btn-primary)
最常被忽略的一点：:extend() 的 all 关键字（如 .x:extend(.y all)）能匹配嵌套规则，但会让继承关系变模糊，调试困难；没明确需求别加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
