如何在SCSS中处理CSS变量(Custom Properties)_实现运行时主题动态更新-css教程-PHP中文网

CSS变量支持运行时动态修改并实时生效，而SCSS变量仅在编译时替换、无法响应式更新；二者作用时机与机制根本不同。

如何在scss中处理css变量(custom properties)_实现运行时主题动态更新

CSS变量不能直接在SCSS中赋值或运算，必须用var()显式引用；SCSS变量只是编译时占位符，改它不会触发页面样式重绘。

为什么`$primary-color: #007aff`不能替代`--primary-color`

SCSS变量（如$primary-color）在Webpack/Vite构建时就被替换成固定值，打包后CSS里根本不存在$符号。你改$primary-color的值，除非重新编译+刷新页面，否则对运行中的页面零影响。

CSS变量（--primary-color）是浏览器原生支持的运行时机制，JS可随时调用document.documentElement.style.setProperty('--primary-color', '#ff3b30')修改，所有background-color: var(--primary-color)会立刻响应。

常见错误：在_variables.scss里写$bg: var(--bg-color)——这会导致编译报错或生成无效CSS
正确做法：SCSS只负责把预设值“倒进”CSS变量，例如--bg-color: #{$bg-light}
SCSS中var()只能当普通字符串用，不能参与lighten()、mix()等函数计算

`@import`顺序决定`:root`变量是否可被覆盖

主题切换依赖选择器优先级。如果你把暗色模式变量写在:root之后的独立文件里，但@import顺序靠前，那暗色规则永远不生效。

推荐结构：

CSS工具箱(专业版)

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

下载

// styles/theme.scss
@import 'variables'; // 定义 $light-bg, $dark-bg 等 SCSS 变量

:root {
  --bg-color: #{$light-bg};
  --text-color: #{$light-text};
}

[data-theme="dark"] :root {
  --bg-color: #{$dark-bg};
  --text-color: #{$dark-text};
}

务必确保[data-theme="dark"] :root的CSS规则在:root之后加载，否则会被覆盖
不要用.dark .button { --color: red }——变量作用域缩到.button内部，其他组件读不到
所有主题分支都必须定义**全部**变量，哪怕值相同，否则未定义变量会回退到inherit或initial

在Vue/UniApp中安全更新`--xxx`的两种方式

直接操作document.documentElement.style最简单，但在小程序平台（尤其微信旧基础库）可能受限；用dataset切换data-theme更稳定、兼容性更好。

推荐方案（持久化+跨平台）：document.documentElement.dataset.theme = 'dark' + localStorage.setItem('ui-theme', 'dark')
慎用方案：document.documentElement.style.setProperty('--bg-color', '#121212')——H5有效，但部分小程序不支持动态设置:root样式
初始化必须做两件事：从localStorage读取上次主题 + 立即写入dataset.theme，漏掉任一环节都会导致首屏闪动或刷新丢失
Vue组件内避免用:style="{ '--bg-color': theme.bg }"绑定单个变量——维护成本高，且无法利用[data-theme]的批量覆盖能力