@extend在嵌套中会放大权重问题，因其将被继承选择器原样拼接到当前嵌套路径末尾，导致选择器层级和特异性雪球式膨胀；安全场景限于扁平结构、BEM变体或纯状态类复用；推荐改用@mixin封装声明或CSS自定义属性实现更可控的复用。
看起来能复用样式，但直接塞进深层嵌套里，反而会让编译出的选择器权重雪球式膨胀——这不是复用，是埋雷。
为什么
在嵌套中会放大权重问题
SCSS 的
不是“复制声明”，而是把被继承的选择器原样拼接到当前选择器路径末尾。一旦它出现在多层嵌套块里，就会叠加父级上下文。
编译后可能生成
—— 后者权重直接从 0-0-1 升到 0-2-1
如果 %title 本身又
了另一个占位符，嵌套+继承双重叠加，权重跳变不可控
更危险的是：同一
被多个嵌套块调用，会重复输出多条高权重规则，CSS体积和覆盖难度同步上升
哪些场景下
是安全的
它只在「扁平、无上下文污染」的结构里才真正省心。
顶层定义 + 顶层调用：
→
配合
修饰符做 BEM 变体：
，输出
，权重恒为 0-1-0
纯状态类复用：
→
，不引入额外父级
替代
的更可控方案
当你要复用逻辑而非拼接选择器时，
几乎总是比
更透明、更可预测。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
用
封装声明块：
→
，零新增选择器层级
需要条件化输出？加参数：
真要复用选择器语义？改用 CSS 自定义属性：
，覆盖只需重设变量，不碰权重
最常被忽略的一点：
的“复用”本质是编译期选择器合并，它解决不了样式职责划分问题。权重失控的根因，往往是你本该拆成两个独立 class 的逻辑，硬靠嵌套+
捆绑在一起了。
@extend@extend@extend.card { .header { h1 { @extend %title; } } }.card .header h1, .card .header .title@extend%placeholder@extend%clearfix { &::after { content: ""; display: table; clear: both; } }.container { @extend %clearfix; }&.btn { &--primary { @extend .btn; background: blue; } }.btn--primary%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; } }.component { --text-color: var(--brand-primary); color: var(--text-color); }@extend@extend