@extend 仅在语义一致、无参数、无嵌套时安全，应优先用 % 占位符而非类名，避免选择器爆炸与权重误解；需前置定义、显式 @use，并禁用跨媒体查询继承。
@extend 能减体积，但用错反而让 CSS 更大、更难调试——它不是“样式继承”，而是编译时选择器合并，只在语义一致、无参数、无嵌套上下文的场景下才安全有效。
什么时候该用 @extend，而不是 @mixin
核心判断标准：你是否需要多个不相关的选择器「共用同一份 CSS 声明」？
- 用
@extend：多个类（如.btn、.link、[role="button"]）必须完全共享 padding / border / transition 等基础视觉属性，且不传参 - 用
@mixin：要支持$color、$size参数，或需内联@media、&:hover，或样式含父子关系（如& > span） - 混合策略可行但需克制：先用
@mixin生成带逻辑的样式块，再抽其中固定部分为%placeholder供@extend
为什么 @extend %foo 比 @extend .foo 更安全
%foo 是纯抽象占位符，不输出任何 CSS，也不会被误写进 HTML；而 @extend .foo 会把 .foo 整个规则链（包括 .foo:hover、.foo.is-active）全拖进来，极易污染语义。
- 必须用
%前缀定义仅用于继承的样式，例如%text-center、%clearfix -
%占位符未被任何@extend调用时，编译后彻底消失，零体积 - 调试时可临时改名成
.debug-text-center查看效果，确认后再换回% - 不要在嵌套规则里直接
@extend %foo，比如.card { .title { @extend %heading; } }—— 这会导致 Sass 尝试拼接.card .title和%heading的所有祖先路径，产出冗余选择器
@extend 导致选择器爆炸？检查这三处
编译后出现超长逗号分隔列表（如 .a, .b, .c, .d, .e, .f, .g {...}），甚至触发 IE 的 4095 字符限制，通常源于：
- 继承目标本身是复合选择器：比如
%u-text-center实际来自.utility .text-center，Sass 会忠实复现整个路径，生成.btn .utility .text-center这类组合 - 跨媒体查询使用：
@media (min-width: 768px) { .nav { @extend %flex-center; } }会让%flex-center的声明脱离媒体查询，跑到外层 CSS 块里 - 多个文件间未显式
@use：Dart Sass v7.0+ 默认禁用隐式跨文件@extend，必须写@use "path/to/placeholders" as *，且被 extend 的%需设为 public
权重不会因 @extend 提升，这点最容易被忽略
@extend 只合并声明，不改变选择器权重。比如你 @extend .btn-primary，但目标类本身只是 .btn（单类权重），那继承后的选择器仍是单类权重，压不住 #header .btn 这种高权重要求。
- 别指望靠
@extend解决覆盖问题；真要保权重，得手动补同级类，例如.my-btn.btn - 所有被
@extend的%或类，必须在继承语句之前定义（import / @use 顺序至关重要） - 运行
sass --watch --style expanded查看真实编译结果，确认没意外拼出.card .card .title这类重复路径
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
