@extend 不是复制粘贴替代品，因其是静态选择器合并，易致css膨胀、跨文件污染及嵌套异常；应仅用于语义明确且永不单独存在的%占位符，并配合@mixin或css自定义属性实现可控复用。
为什么 @extend 不是“复制粘贴”的替代品
很多人一看到 @extend 就想用它把公共样式（比如按钮的 display: inline-flex、padding）抽出来复用，结果编译后 CSS 体积不降反升，甚至出现意料外的层级覆盖。根本原因在于：@extend 是静态选择器合并，不是运行时样式注入——它会把所有被继承的选择器“塞进”目标选择器的声明块里，还可能跨文件污染。
实操建议：
- 只对语义明确、**永不单独存在**的占位符选择器使用
@extend，比如%clearfix、%sr-only，且必须用%前缀声明 - 避免对类名（如
.btn）或元素选择器（如h1）直接@extend，否则 Sass 会把整个 .btn 的规则链都拖进来，包括它的&:hover、&.is-active等变体 - 启用
extend的!optional标志（@extend %foo !optional），防止因占位符未定义导致编译失败
@extend 在嵌套规则里的行为很反直觉
当你在嵌套结构中用 @extend，Sass 不会“提升”继承关系，而是按字面拼接选择器。比如 .card { .title { @extend %heading; } }，并不会生成 .card .title 继承 %heading 的效果，而是尝试把 %heading 的所有父级上下文都硬套进去，极易产出冗余或无效选择器。
常见错误现象：
- 编译后出现类似
.card .card .title这种重复类名的选择器 -
%heading原本定义在另一个文件，但被 extend 后，其样式规则出现在完全无关的 CSS 区域里 - 媒体查询内使用
@extend，结果扩展后的选择器脱离了媒体查询作用域
正确做法：把需要复用的视觉模式封装成 @mixin，而不是依赖 @extend 跨嵌套层级“拉取”样式。
Sass 7.0+ 后 @extend 的兼容性断层
新版 Dart Sass（v7.0+）默认禁用“跨文件 @extend”，即在一个文件里定义的 %placeholder，无法被另一个未显式 @use 或 @import 它的文件继承。这不是 bug，是设计上的隔离强化。
影响和应对：
- 旧项目升级后出现 “Undefined placeholder selector” 错误，本质是模块系统更严格了
- 必须用
@use "path/to/placeholders" as *显式引入，且被 extend 的占位符需设为public（加@forward或直接暴露） -
@import已废弃，继续用会导致@extend失效或警告，尤其在构建工具（Vite、Webpack）中容易静默失败
比 @extend 更稳的替代方案其实就两个
真正减少冗余又不埋坑的方式，往往不是更花哨的语法，而是回归约束力更强的模式：
- 用
@mixin+ 显式参数控制变体，比如@mixin btn-style($variant: primary)，调用时清晰可控，无隐式副作用 - 用 CSS 自定义属性（
--btn-padding）配合单一基础类（.btn），把可变部分抽离到 HTML 或 JS 层，Sass 只管骨架
复杂点在于：你得接受“复用不等于少写几行”，而在于让变化有迹可循。一旦开始靠 @extend 隐藏样式依赖，调试时连该去哪个文件找定义都得猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
