SCSS的!global仅影响编译期变量作用域，无法作用于运行时CSS变量；覆盖CSS变量应通过层叠规则在更具体选择器中重声明--variable，而非依赖!global。
SCSS 中的 $variable 和 CSS 原生变量 --variable 完全不互通，!global 只影响 SCSS 编译期变量的作用域，对 CSS 变量毫无作用——想用它“覆盖” --color-primary 是无效的。
为什么 !global 不能影响 CSS 变量
!global 的唯一职责是把一个在局部作用域（比如 @mixin 或选择器块内）声明的 $ 变量，提升为整个文件可访问的全局 SCSS 变量。它不生成、不修改、也不读取任何 --xxx。CSS 变量在浏览器运行时才解析，而 !global 在 Sass 编译阶段就已完成使命，两者生命周期无交集。
常见错误现象：$color-primary: #ef4444 !global; 写完后发现 button { background-color: var(--color-primary); } 没变色——这不是 !global 没生效，而是你根本没定义或导出 --color-primary 这个 CSS 变量。
真正需要覆盖 CSS 变量时该怎么做
覆盖 CSS 变量靠的是 CSS 层叠规则（cascade），不是 SCSS 修饰符。你需要在更具体的选择器里重声明同名 -- 变量：
立即学习“前端免费学习笔记（深入）”；
- 在
:root定义基础值：:root { --color-primary: #3b82f6; } - 在组件容器上覆盖：
.card-theme-dark { --color-primary: #1e40af; } - 确保 HTML 结构中
<div class="card-theme-dark">包裹了目标元素，这样var(--color-primary)才会取到新值 - 不要试图用
$color-primary !global去“同步”这个值——它们之间没有自动绑定
!global 的合理使用场景和陷阱
它只在极少数动态配置生成逻辑中有意义，比如你在 @function 里计算主题色，并希望结果供后续其他 @mixin 使用：
- 必须配合赋值语句使用：
$theme-mode: "dark" !global;，单独写!global无效 - 若已在外部声明同名全局变量，
!global不会覆盖它，只会报错Invalid CSS after "$xxx": expected "{", was "!global" - 在
@use模块化项目中慎用：!global声明的变量不会跨模块传播，仍需显式@use "x" as *或命名空间访问 - 绝大多数情况，你应该用
!default+@use "config" with ($color-primary: ...)来实现可配置覆盖，而不是依赖!global
最容易被忽略的一点：当你在 @media 块里用 !global 改变量，那个变量在媒体查询外依然有效——但它的值已经是最后一次赋值的结果，和响应式意图常常背道而驰。这时候应该直接用 CSS 变量 + @media 重设 -- 值，而非折腾 SCSS 变量作用域。
