Sass 不允许在 @media 中 @extend 外部选择器，因作用域隔离导致权重和行为无法保证；应改用 @mixin + @include 实现条件化样式复用，兼顾灵活性、调试性与权重可控性。
@extend在@media中报错：You may not @extend an outer selector
直接原因很明确：Sass 不允许在 @media 块内 @extend 顶层或外部定义的选择器。比如你在媒体查询里写 @extend %text-sm，而 %text-sm 定义在文件最外层，编译就会失败，报错信息就是那句 You may not @extend an outer selector from within @media。
这不是 bug，是设计限制——@extend 的语义是“复用已有规则”，但媒体查询内的样式作用域是隔离的，Sass 无法安全地把外部选择器“拉进”这个作用域并保持权重和行为一致。
- 错误写法：
@media (max-width: 768px) { .btn { @extend %text-sm; } } - 正确思路：把需要响应式控制的部分，从“继承”转为“条件化注入”，也就是用
@mixin+@include替代
用@mixin封装断点逻辑，替代跨媒体查询@extend
核心是把原本想靠 @extend 复用的样式声明，抽成可参数化的 @mixin，再在媒体查询上下文中调用它。这样既保留复用性，又完全规避作用域问题。
例如，你想让 .card 和 .alert 都在小屏下用紧凑字体，但不能在 @media 里 @extend %compact-text：
- 先定义一个纯样式 mixin：
@mixin compact-text { font-size: 14px; line-height: 1.4; } - 再在媒体查询中使用：
@media (max-width: 768px) { .card { @include compact-text; } .alert { @include compact-text; } } - 如果断点频繁使用，就再包一层响应式 mixin（如
@mixin respond-to("sm")），把@media逻辑收口
@extend 和 @include 在响应式场景下的关键差异
很多人以为只是写法不同，其实背后机制完全不同：
-
@extend是静态合并选择器：它会把所有调用处的 selector 拼进目标规则块，生成类似.card, .alert { font-size: 14px; }的 CSS —— 但一旦涉及媒体查询，这个合并过程就失效 -
@include是内容复制：每次@include都会把 mixin 体内的声明原样展开到当前上下文，所以能天然适配@media、&:hover等任意嵌套环境 - 权重不受影响：
@include展开后的选择器权重完全由你写的 selector 决定，不会像@extend那样因合并引入意外的高权重链（比如.layout .card） - 调试友好：编译后 CSS 行号和结构清晰，不会出现一堆被
@extend合并出来的长选择器链，尤其利于排查移动端样式覆盖问题
迁移时容易忽略的细节
从 @extend 切到 @include 不是简单替换，有几个实际踩坑点：
- 占位符（
%）本身不能传参，但@mixin可以：如果你原来靠%text-sm控制字号，现在可以升级为@mixin text-size($size: 14px)，灵活性直接翻倍 - 注意变量作用域：mixin 内部访问外部变量没问题，但如果 mixin 定义在另一个文件，要确保已通过
@use正确导入（Dart Sass v7.0+ 默认不支持隐式跨文件引用） - 不要在 mixin 里写
@extend：有人试图在@mixin体内再调用@extend，这并不能绕过限制，反而会让问题更隐蔽 - 如果原有
@extend链很长（比如 A → B → C），改用@include后，每个组件需显式调用对应层级的 mixin，看似代码略多，实则责任更清晰
真正麻烦的从来不是语法转换，而是那些藏在 @extend 背后、靠隐式合并掩盖的样式耦合——一旦拆开，你才看得清哪些复用是真必要，哪些只是历史惯性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
