SCSS变量提升不影响CSS渲染，问题在于混淆$var与--var：前者编译期静态替换，后者运行时浏览器查找，必须用#{$var}显式插值导出，否则--var声明丢失或无效。
SCSS变量提升（hoisting）本身不直接影响CSS渲染效果，真正出问题的是开发者误以为它能控制运行时CSS变量的行为——结果编译后压根没生成--xxx，或生成了但值不对，导致var(--xxx)查不到、回退到fallback甚至失效。
SCSS变量和CSS变量根本不在一个系统里
SCSS的$color是编译期静态替换，CSS的--color是浏览器运行时查找机制。两者完全隔离，!global只影响前者的作用域，对后者零作用。
- 写
$primary: #3b82f6 !global;，再在CSS规则里写color: var(--primary);→ 编译后仍是字面量color: var(--primary);，浏览器找不到定义 - 想用SCSS变量“驱动”CSS变量，必须显式插值：
--color: #{$primary};，否则--color: $primary;会原样输出，变成无效CSS - 在
@mixin里声明$theme并!global，不代表:root就自动有了--theme——那是两件事
!global不是“让CSS变量全局生效”的开关
!global唯一合法用途是突破嵌套作用域，让一个局部$变量能在当前文件其余地方被读取。它不生成、不注入、不同步任何--xxx。
- 常见错误：
@media (max-width: 768px) { $breakpoint-color: red !global; }，然后在外部写.btn { background: var(--breakpoint-color); }→ 编译后--breakpoint-color根本不存在 - 正确做法：把
--breakpoint-color定义在:root或具体容器选择器下，靠层叠规则覆盖，而不是依赖$变量提升 - 如果真要用SCSS生成CSS变量，必须用
#{$var}插值，并确保该$var在插值点已定义且有值
变量名冲突常被归因于提升，实际是命名空间失控
当多个SCSS文件都声明$primary，又都用#{$primary}生成--primary，最后编译出的CSS里可能有多个同名--primary定义，谁在后面谁生效——但这不是提升导致的，是引入顺序+层叠规则在起作用。
立即学习“前端免费学习笔记（深入）”；
- 比如
theme.scss先定义$primary: blue;并生成:root { --primary: #{$primary}; }，component.scss后引入并覆盖$primary: red;再生成一遍--primary→ 后者胜出 - 这种“覆盖”不可控，因为SCSS编译顺序依赖构建工具配置，而非代码书写顺序
- 更安全的做法：给CSS变量加前缀，如
--theme-primary、--button-bg，避免和第三方库或未来扩展冲突
问题核心从来不是“SCSS变量有没有被提升”，而是“你有没有意识到$x和--x之间没有自动桥接”。一旦混淆这两层，所有调试都会绕远路——查DOM里style属性、看Computed面板、翻Elements的Styles标签页，最终发现--x压根没被定义，或者定义在了错误的选择器下。
