@extend不能在@media内调用占位符，因其是编译期静态合并机制，无法跨指令块引用；必须将占位符定义移入同一@media块内，或改用@mixin封装响应式样式。
@extend在@media内调用时会报错或生成意外结果
因为Sass的@extend是静态选择器合并机制，它无法将外部已声明的选择器“注入”到@media块内部——编译器只允许扩展当前作用域内、且在同一媒体查询上下文里定义的选择器。
常见错误现象包括：
-
"%flex-center" is not a valid selector（占位符未在@media块内定义） - 编译后出现重复样式，比如
.btn的规则被复制进@media块两次 - 本该复用的基类样式变成孤立声明，破坏CSS体积控制目标
@extend跨@media的典型失效场景
当你写这样的SCSS时：
%text-center {
text-align: center;
}
@media (min-width: 768px) {
.header {
@extend %text-center; // ❌ 报错：找不到%text-center
}
}
原因不是路径问题，而是Sass设计上禁止跨指令块引用。即使%text-center在同文件顶部定义，@extend在@media里也看不到它——除非你把它挪进@media块内部。
立即学习“前端免费学习笔记（深入）”；
可行做法：
- 把占位符定义移到
@media块内：@media (min-width: 768px) { %text-center { ... } .header { @extend %text-center; } } - 改用
@include+@mixin封装样式块，避开选择器合并逻辑 - 对需要响应式继承的类，直接在各断点里分别
@extend对应的基础类（需确保基础类本身也在同一断点中定义）
为什么不能让@extend“智能提升”占位符到外层？
这不是实现难度问题，而是语义冲突：CSS媒体查询是运行时条件判断，而@extend是编译期静态合并。如果允许@extend跨@media引用，就等于要求Sass在编译阶段预判“这个类将来会在哪些媒体条件下生效”，这违背了CSS分层渲染模型。
更实际的影响：
- 浏览器解析长选择器链变慢，尤其在嵌套+媒体查询+
@extend三者叠加时 - Dart Sass 7.0+ 模块隔离后，跨
@use文件的@extend失败更静默，容易漏掉样式 - 一旦用了
@extend %reset这类全局占位符，又想在@media print里复用，就必须重写一遍——没有捷径
替代方案：什么时候该放弃@extend改用@mixin
当你要做这些事时，@mixin是唯一合理选择：
- 在
@media、@supports或&:hover等条件下复用样式逻辑 - 需要传参（比如
@mixin padding-x($size)） - 目标样式本身含复合选择器（如
.utility .text-center），@extend会原样拼接导致权重失控 - 构建产物要压缩体积，且你无法接受
.card-header, .modal-footer, .toast-body这种爆炸式选择器
真正难处理的从来不是语法报错，而是那些没报错却悄悄把.layout .header和.sidebar .header都塞进同一规则块的@extend调用——它们在开发时看起来完全正常，上线后才在旧版 Safari 里触发选择器长度截断。
