占位符选择器 %placeholder 必须定义在顶层作用域、不可嵌套、不可动态命名、跨文件需显式导入；@extend 不支持媒体查询内定义的占位符，链式继承按源码顺序合并声明，慎用于局部或响应式场景。

占位符选择器 %placeholder 怎么写才不会失效

占位符本身不输出 CSS，只有被 @extend 调用时才生效；写错位置或跨文件未正确引入，就完全没效果。

• 必须定义在能被调用的作用域内：如果放在嵌套规则里（比如 .card { %hidden { display: none; } }），外部无法 @extend %hidden
• 不能用变量拼接名：%#{$name} 会报错，Sass 不支持动态占位符名
• 跨文件使用时，必须用 @use 或 @import 显式加载——只 @use "vars" 不行，得 @use "mixins" as * 或明确 @use "mixins" 后写 @extend mixins.%reset

@extend %btn-base 和 @extend .btn-base 的行为差异

前者复用样式声明但不产生额外选择器，后者会把目标类的所有选择器链都复制进来，极易膨胀。

• @extend %btn-base：只把 %btn-base 里的声明（如 padding: 8px）合并进调用它的选择器，最终 CSS 里看不到 %btn-base
• @extend .btn-base：假设 .btn-base 是 button.btn-base, .btn.btn-base，那所有 extend 它的地方都会追加这两条选择器，.primary-btn 可能变成 button.btn-base, .btn.btn-base, .primary-btn
• 一旦被 extend 的类本身用了属性选择器（如 [disabled]）或伪类（如 :hover），这些也会被复制，可能触发意外覆盖

为什么 @extend 在媒体查询里经常“失联”

因为 @extend 的解析发生在编译期，而媒体查询是运行时逻辑；Sass 默认不允许跨媒体查询块继承。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 下面写法无效：

  @media (max-width: 768px) {
    %mobile-text { font-size: 14px; }
  }
  .foo { @extend %mobile-text; }

  —— %mobile-text 在媒体查询内，外部无法访问
• 正确做法是把占位符提至顶层，再在媒体查询中控制其内容：

  %text-style { line-height: 1.5; }
  @media (max-width: 768px) {
    %text-style { font-size: 14px; }
  }
  p { @extend %text-style; }

• 若需条件化 extend，改用 @mixin + @include 更可控，尤其涉及响应式断点时

多个 @extend 链式调用时的优先级和冲突

Sass 按源码顺序合并声明，同名属性后写的覆盖先写的；但选择器权重不会叠加，这点和 CSS 原生规则一致。

立即学习“前端免费学习笔记（深入）”；

• 如果 %a { color: red; }、%b { color: blue; }，然后 .x { @extend %a; @extend %b; }，最终 color: blue
• 但若 %a 定义了 font-weight: bold，%b 没定义，则保留 bold；继承不是“全量覆盖”，而是声明级合并
• 慎用多重 extend：当两个占位符都定义了 margin，且值类型不同（如 margin: 0 vs margin-top: 10px），Sass 不会智能合并，后者会完全取代前者

实际项目里最常出问题的，是把占位符塞进局部作用域、或在媒体查询里定义后又想全局 extend——这俩错误几乎占了 80% 的“为啥没生效”提问。 Sass 的 extend 看似简单，本质是静态 AST 合并，它不理解“屏幕宽度变化”，也不认识“组件作用域”。