@extend生成超长选择器链是因为它合并调用位置而非复制样式，嵌套中定义占位符会拼接完整祖先路径，媒体查询和伪类叠加导致组合爆炸，跨文件引用易失效，应优先使用@mixin或CSS自定义属性。
为什么@extend会生成超长选择器链
@extend不是复制样式声明，而是把所有调用它的地方“合并进”被继承的选择器规则里。一旦%placeholder定义在嵌套结构中，Sass 会忠实拼接完整祖先路径。比如写在.layout .dashboard块里的%flex-center，编译后会变成.layout .dashboard .modal, .layout .dashboard .card——选择器长度直接翻倍，且无法压缩。
- 浏览器解析 CSS 是从右往左的，
.a .b .c .d .e这类长链显著拖慢匹配速度，旧版 Safari 和 IE 还可能触发选择器长度限制 - 多个组件在
@media或&:hover里调用同一占位符，Sass 会把媒体查询“提级”或把伪类拼进去，产出.btn:hover, .card .btn:hover, .modal .btn:hover这类爆炸式组合 - 基类本身含复合选择器（如
.utility .text-center），@extend会原样照搬，而不是提取语义，结果是.card .utility .text-center而非预期的.card .text-center
嵌套内部使用@extend必然放大冗余
写成.card { .header { @extend %text-sm; } }看似合理，实则危险：Sass 会尝试把.card .header和所有其他调用%text-sm的位置（比如.alert .header）全部合并进一条规则，同时带上各自的父级上下文。输出可能是：.card .header, .card .title, .alert .header, .alert .title——完全无关的组件被强行卷入同一规则块。
-
%placeholder不能出现在嵌套规则内部，这是硬性限制，不是风格建议 - 一旦
%text-sm本身又@extend了另一个占位符，嵌套+继承双重叠加，选择器数量和长度指数增长 - 这种冗余在压缩模式下毫无缓解：
--style compressed只删空格换行，不碰选择器结构
@extend跨文件引用容易静默失效或路径错乱
Dart Sass v7.0+ 默认模块隔离，%placeholder不会自动暴露到其他文件。如果没用@use显式导入，要么报错Extending unknown pseudo-class "%xxx"，要么静默失败——构建时漏掉某些扩展，开发者误以为要加更多@extend补救，形成恶性循环。
- 正确写法只有两种：
@use "base" as *后写@extend %reset-text；或@use "base"后写@extend base.%reset-text - 循环依赖（A
@useB，B 又@useA）会导致编译中断，且错误信息不直观 - 路径写错、
@use顺序颠倒、或目标文件没导出%，都会让@extend无声失效，调试时很难定位
真正该用@mixin而不是@extend的场景
当你需要传参、条件逻辑、或只是复用一组声明而非选择器语义时，@mixin几乎总是更透明、更可控。它只复制声明，不新增选择器层级，也不会污染权重或触发选择器爆炸。
立即学习“前端免费学习笔记（深入）”；
-
@mixin text-emphasis($color: $brand-primary) { color: $color; font-weight: 600; }→ 调用点清晰，输出仍是独立类名，PurgeCSS 能准确识别未用类 - 需要响应式适配？加参数：
@mixin responsive-padding($breakpoint: md) { @if $breakpoint == sm { padding: 4px; } @else { padding: 8px; } } - 想实现“继承”效果？用 CSS 自定义属性：
.component { --text-color: var(--brand-primary); color: var(--text-color); }，覆盖只需重设变量，不碰选择器权重
最常被忽略的一点：@extend 的“复用”本质是编译期选择器合并，它解决不了样式职责划分问题。体积膨胀的根因，往往是你本该拆成两个独立 class 的逻辑，硬靠嵌套+@extend捆绑在一起了。
