微信小程序WXSS不解析:root或page内的CSS变量声明，唯一可靠方式是将--xxx变量通过JS动态注入到元素style属性中实现继承使用。
微信小程序原生不支持 :root 声明 CSS 变量，var(--x) 在 WXSS 文件里写死的 :root { --x: y } 会被直接忽略——不是报错，而是压根不解析。真正能用上 CSS 变量的唯一可靠路径，是让变量定义出现在 DOM 元素的 style 属性中，靠继承生效。
为什么 :root 和 page 在 WXSS 里都无效
WXSS 解析器对自定义属性的支持极其有限：它只认“运行时注入到元素 style 上”的 --xxx，不解析任何选择器块内的声明（包括 :root、page、view 等）。哪怕你写了：
page {
--primary: #1890ff;
}
.button {
color: var(--primary);
}
这段样式在构建或运行时都不会起效。原因不是语法错，而是 WXSS 引擎根本跳过这类声明。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
-
var(--color)渲染成透明/默认色，控制台无报错 - 开发者工具里查元素 computed 样式，看不到变量展开结果
- 改了
app.wxss里的--x，页面完全没反应
必须用 JS 动态注入到根节点的 style 属性
这是目前唯一跨平台（微信/支付宝/百度）稳定可用的方式。核心逻辑：把变量拼成字符串，挂到最外层容器的 style 上，子元素靠继承使用 var()。
实操建议：
- 在
App.js的onLaunch中读取主题配置（如wx.getStorageSync('theme')），生成style字符串：this.globalData.themeStyle = '--color-primary: #1890ff; --bg-color: #ffffff;' - 在
app.wxml顶层包裹一层<view class="app-root" style="{{app.globalData.themeStyle}}"> - 所有子组件的 WXSS 中可安全使用
color: var(--color-primary);—— 因为变量定义在祖先元素的内联style里，继承链完整 - 切换主题时，只需
this.setData({ 'viewData.style': newStyleStr })，触发重绘即可
var() 的默认值和作用域继承规则
CSS 变量是继承的，但只沿 DOM 树向下传递，且每个元素只能访问自己及祖先元素 style 中定义的变量。没有定义时，var(--x, red) 的第二参数才生效。
关键点：
- 变量名必须以
--开头，如--color-primary；写成colorPrimary或primaryColor会失效 - 默认值可以是另一个变量：
var(--text-color, var(--fallback-color, #333))，但嵌套层级不宜深 - 局部覆盖很简单：在某个
<view style="--color-primary: #ff4d4f;">里重新定义，其子元素自动继承新值 - 如果某处
var(--x)没生效，优先检查：该变量是否真的出现在某个祖先元素的style属性里（而非 WXSS 文件中）
别踩这些坑：命名、更新、性能
变量管理看似简单，实际容易在细节上翻车：
- 变量名不要带单位混用：比如
--gap: 20后面又写margin: var(--gap) rpx—— 必须写成--gap: 20rpx，CSS 不会自动补单位 - 频繁 setData 大量变量字符串会触发多次视图层重排，建议合并为单个
style字符串，而不是每个变量单独 setData - 暗黑模式切换时，别只改颜色，记得同步更新
background-color、color、border-color等多个变量，否则出现文字看不见 - weui-wxss 等第三方库的变量是 LESS 编译期处理的，和运行时 CSS 变量无关，二者不要混用期望自动同步
真正麻烦的从来不是怎么写 var()，而是确保那个 --xxx 真的挂在了 DOM 上，并且挂的位置能让所有需要它的组件都继承得到。
