@extend在嵌套中会放大权重问题，因其将被继承选择器原样拼接到当前嵌套路径末尾，导致选择器层级和特异性雪球式膨胀；安全场景限于扁平结构、bem变体或纯状态类复用；推荐改用@mixin封装声明或css自定义属性实现更可控的复用。
@extend 看起来能复用样式，但直接塞进深层嵌套里，反而会让编译出的选择器权重雪球式膨胀——这不是复用，是埋雷。
为什么 @extend 在嵌套中会放大权重问题
SCSS 的 @extend 不是“复制声明”，而是把被继承的选择器原样拼接到当前选择器路径末尾。一旦它出现在多层嵌套块里，就会叠加父级上下文。
-
.card { .header { h1 { @extend %title; } } }编译后可能生成.card .header h1, .card .header .title—— 后者权重直接从 0-0-1 升到 0-2-1 - 如果 %title 本身又
@extend了另一个占位符，嵌套+继承双重叠加，权重跳变不可控 - 更危险的是：同一
%placeholder被多个嵌套块调用，会重复输出多条高权重规则，CSS体积和覆盖难度同步上升
哪些场景下 @extend 是安全的
它只在「扁平、无上下文污染」的结构里才真正省心。
- 顶层定义 + 顶层调用：
%clearfix { &::after { content: ""; display: table; clear: both; } }→.container { @extend %clearfix; } - 配合
&修饰符做 BEM 变体：.btn { &--primary { @extend .btn; background: blue; } }，输出.btn--primary，权重恒为 0-1-0 - 纯状态类复用：
%disabled { opacity: 0.5; cursor: not-allowed; }→.form-control:disabled { @extend %disabled; }，不引入额外父级
替代 @extend 的更可控方案
当你要复用逻辑而非拼接选择器时，@mixin 几乎总是比 @extend 更透明、更可预测。
- 用
@mixin封装声明块：@mixin text-emphasis { color: $brand-primary; font-weight: 600; }→.link { @include text-emphasis; }，零新增选择器层级 - 需要条件化输出？加参数：
@mixin responsive-padding($breakpoint: md) { @if $breakpoint == sm { padding: 4px; } @else { padding: 8px; } } - 真要复用选择器语义？改用 CSS 自定义属性：
.component { --text-color: var(--brand-primary); color: var(--text-color); }，覆盖只需重设变量，不碰权重
最常被忽略的一点：@extend 的“复用”本质是编译期选择器合并，它解决不了样式职责划分问题。权重失控的根因，往往是你本该拆成两个独立 class 的逻辑，硬靠嵌套+@extend 捆绑在一起了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
