占位符选择器%必须顶层定义、后定义先引用、跨文件需显式导入，且仅适用于静态样式；混淆::placeholder伪元素与%placeholder占位符、在@mixin中动态使用@extend或依赖其处理状态/变量均会导致失效。
占位符选择器%本身不输出任何 CSS，它只在被@extend调用时才把样式“内联”进目标选择器——如果没生效，90% 是定义位置、引用顺序或作用域出了问题。
占位符必须写在顶层，不能嵌套在任何选择器或媒体查询里
一旦把%btn-base写在.card { }或@media (min-width: 768px) { }内部，Sass 就不会识别它为合法占位符，编译后直接消失，@extend %btn-base会报错 Undefined placeholder selector "%btn-base"。
- 错误写法：
.card { %btn-base { padding: 0.5rem; } }→ 编译后找不到%btn-base - 正确写法：所有
%xxx必须和.class、@mixin一样，平级写在文件最外层 - 检查方式：编译后 CSS 文件里搜
%btn-base，如果一个结果都没有，说明它根本没被解析
@extend 必须出现在占位符定义之后，跨文件要显式加载
Sass 是顺序解析的，@extend %xxx语句执行时，%xxx必须已经声明过。Dart Sass 7.0+ 默认启用模块隔离，@use或@import不是“自动全局可用”，而是需要明确导入。
- 错误写法：先写
@extend %reset，再在同个文件底部定义%reset→ 报错Invalid CSS after "": expected selector, was "}" - 跨文件必须写：
@use "base" as *;（然后直接用@extend %reset），或@use "base";（然后用@extend base.%reset） - 别在
@mixin里动态写@extend %xxx，作用域和解析时机不可控，容易失效
::placeholder 和 %placeholder 别搞混了
这是两个完全无关的概念：::placeholder是 CSS 伪元素，用于控制 input 的占位文字样式；%placeholder是 Sass 的占位符选择器，用于@extend复用样式。名字像，但语法、用途、生效机制全不同。
-
::placeholder写错前缀（比如写成:placeholder）、被框架重置、或优先级不够，会导致颜色不生效——但这和%xxx是否生效毫无关系 - 如果你在查“占位符颜色无效”，实际想解决的是
input::placeholder { color: #999; }不起作用，那该去检查浏览器兼容性、CSS 层叠、或是否用了all: unset - 反过来，如果你写了
%sr-only { position: absolute; clip: rect(1px, 1px, 1px, 1px); }却没效果，那问题一定出在@extend %sr-only没被正确定义或调用，而不是浏览器支持问题
真正稳定复用，往往该换思路
%placeholder + @extend只适合无参、无状态、完全静态的样式块，比如%clearfix、%sr-only。一旦涉及:hover、@media、变量传入，它就立刻失效，还容易引发选择器权重爆炸。
-
%btn:hover语法错误，Sass 直接报错 -
%sm-only写在@media块里，编译失败 - 需要根据
$size生成不同padding？必须用@mixin btn($size)，而不是占位符 - 更推荐：
@mixin focus-state($color)封装状态逻辑，或 HTML 上直接加多个类（如class="btn btn--primary focusable"）
最容易被忽略的一点：占位符不是“自动生效”的魔法开关，它没有运行时行为，也不参与浏览器渲染流程——它只是 Sass 编译期的一个文本合并指令。你看到它没效果，几乎从来不是浏览器的问题，而是 Sass 没读到、没认出、或没机会展开它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
