@extend 是让选择器共享声明块的机制，通过合并为逗号分隔列表减少重复css，但易引发选择器爆炸、权重失效等问题；应仅对单类名或占位符使用，确保定义在引用前，并优先用@mixin处理需参数或动态值的场景。
@extend 不是“继承”样式，而是让选择器共享声明块——它把被继承的选择器和当前选择器合并成一个逗号分隔的列表。这能减少重复 CSS，但用错会引发选择器爆炸、权重失效或编译报错。
为什么@extend会生成冗长的选择器？
因为 @extend 本质是「查找并拼接」：只要目标选择器本身带结构（比如 .layout .sidebar .btn），所有继承它的类都会被展开成完整路径组合。
常见现象：.cta-button {@extend .u-text-center} 编译后出现 .layout .sidebar .u-text-center, .cta-button 这种长选择器，体积翻倍，还可能触发 IE 的选择器长度限制。
- 只对单类名（如
.btn）或占位符（如%text-center）使用@extend - 避免继承带空格、嵌套或层级关系的选择器（如
.card .header、&:hover） - 运行
sass --watch --style expanded查看真实输出，确认没意外膨胀
@extend 跨文件失效的真正原因
@extend 是静态查找，只认「已声明」的祖先规则。如果 %reset 定义在 _base.scss，而你在 _components.scss 里 @extend %reset，但 _components.scss 被 @import 在 _base.scss 前面，Sass 就会报错："%reset" is not a valid selector。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 确保继承目标（类或占位符）在
@extend语句之前定义 - 按依赖顺序组织
@import：基础占位符 → 工具类 → 组件 → 页面 - 优先用
%placeholder（以%开头）定义仅用于继承的抽象样式，它不输出 CSS，也不会被误用
什么时候该用 @mixin 而不是 @extend？
@extend 不支持参数，也不适合需要动态值的场景。比如你想传入颜色、间距或断点，@extend 直接无解。
- 需要传参（如
@mixin btn($color)）、响应式嵌套、或跨层级复用时，必须用@mixin -
@extend适合语义同类、样式完全一致的场景（如所有按钮共用.btn）；@mixin适合配置化、可变的逻辑块 - 公共重置、原子工具类（如
.t-center）用@extend更省体积；组件内部变体（如.btn--large）建议用@mixin或直接写类
@extend 不会提升选择器权重
这是最容易忽略的陷阱：你 @extend .btn-primary，但目标类 .btn-primary 本身只有单类权重（0,1,0），继承后的 .my-button 也还是 0,1,0 —— 它压不住 #header .btn（0,2,0）这种高权重要求。
- 别指望
@extend解决覆盖问题；权重由最终生成的选择器决定 - 若需保证权重一致，手动补同级类（如
class="btn btn-secondary"），而不是只靠@extend - 复杂布局中，优先考虑 BEM 命名 + 单一类名，比强依赖
@extend更可控
@extend 就从节省代码变成埋雷现场。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
