@media内@extend报错因作用域隔离：它只识别当前媒体查询内定义的选择器，无法访问外部类或占位符，导致“Extending unknown pseudo-class”；替代方案是用@mixin或确保%placeholder在@media外层全局定义。
为什么@media里@extend会报“Extending unknown pseudo-class”
因为 Sass 的 @extend 在 @media 块内是作用域隔离的：它只认当前媒体查询内部已定义的选择器，对外部（顶层或其它 @media 块）定义的类或占位符完全不可见。你写 .btn-primary { @extend .btn; } 没问题，但一旦挪进 @media (min-width: 768px) { .btn-primary { @extend .btn; } }，Sass 就会报错 Extending unknown pseudo-class ".btn"——不是语法错，是查找失败。
@extend在@media内实际发生了什么
Sass 编译时把 @media 当作一个独立的作用域边界。它不会把外部规则“提级”进来，也不会跨域合并选择器链。这意味着：
- 外部定义的
.btn或%flex-center在@media内部根本不可引用 - 即使你强行在
@media里重复定义%flex-center，它也只对该媒体块生效，无法被外部@extend复用 - 嵌套在
@media里的&:hover或&__content调用@extend，同样受限于该块的局部作用域
替代方案：哪些能用，哪些不能碰
想在响应式场景复用样式，必须绕开 @media 内的 @extend：
- ✅ 用
@mixin：把公共声明封装成可调用的片段，支持传参、嵌套、跨媒体查询使用 - ✅ 把占位符定义在
@media外层，并确保@use或@import顺序正确（定义必须在引用前） - ❌ 不要在
@media块里@extend任何外部类名（如.u-text-center）或未在本块内声明的%placeholder - ❌ 不要指望用
@extend实现“条件继承”——比如只在大屏下继承某个布局类，这在 Sass 里没有语义支撑
Dart Sass 7.0+ 的模块隔离让这事更敏感
新版默认禁用隐式跨文件 @extend，而 @media 块进一步强化了作用域切割。哪怕你在同一文件里先写了 %reset，再在 @media 里 @extend %reset，只要中间隔着嵌套或变量作用域，就可能静默失败或编译报错。最稳的做法是：所有会被 @extend 的目标，都放在全局作用域顶层，且显式用 @use 引入对应模块。
立即学习“前端免费学习笔记（深入）”；
