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 变量时该怎么做

覆盖 CSS 变量靠的是 CSS 层叠规则（cascade），不是 SCSS 修饰符。你需要在更具体的选择器里重声明同名 -- 变量：

• 在 :root 定义基础值：:root { --color-primary: #3b82f6; }
• 在组件容器上覆盖：.card-theme-dark { --color-primary: #1e40af; }
• 确保 HTML 结构中 <div class="card-theme-dark"> 包裹了目标元素，这样 <code>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 变量作用域。