微信小程序原生不支持 :root 全局声明 CSS 变量，var(--color) 在 WXSS 中直接使用会静默失效；仅当变量通过祖先元素 style 属性注入或显式 @import 并配 fallback 时才生效。
微信小程序原生不支持 :root 全局声明 CSS 变量，var(--color) 在 WXSS 文件中直接使用会静默失效——不是报错，而是压根不解析。它只在「变量通过祖先元素的 style 属性注入」时才真正生效。
为什么 app.wxss 里写 :root { --x: #000 } 没用
小程序的样式编译是文件隔离的：app.wxss 中的 :root 只作用于 app.wxml 根节点（实际几乎无内容），不会透传到任何页面或组件。即使你在页面 index.wxss 里写 page { color: var(--x); }，也会因变量未定义而回退为透明或默认值。
- 基础库
2.25.2之前，var()函数本身就不被解析，写了等于白写 - 变量名必须严格用双短横线前缀，
--bg_color在旧版开发者工具中会被忽略，得写成--bg-color -
@import不能嵌套：你不能在app.wxss里@import "./vars.wxss"再让所有页面自动继承——每个页面和组件都得自己@import
真正能用 var() 的两种可靠方式
一种是「JS 注入 + style 继承」，另一种是「显式 @import + 回退值兜底」。前者更灵活，后者更静态但易维护。
- JS 注入：在
App.onLaunch中拼出style字符串，挂到var(--primary-color) - @import 方式：把变量抽成
/styles/vars.wxss，所有页面和组件的 .wxss 都显式@import "/styles/vars.wxss"，且每处var()必须带 fallback，例如color: var(--text-color, #333) - 自定义组件内部无法访问页面引入的变量——组件自己的
component.wxss也得单独@import，路径必须统一（推荐绝对路径）
calc() 和单位混用是高频翻车点
小程序对 calc() 中的单位校验极严。写 padding: calc(var(--space-md) * 2) 没问题，但 width: calc(100% - var(--space-md)) 会失败，除非 --space-md 的值自带单位（如 16px），不能是纯数字 16。
- 变量值尽量用
rem或带单位的px/rpx，避免无单位数值参与计算 - 跨组件复用变量时，不要直接在子组件里写
color: var(--primary-color)，而应先声明局部变量：.btn { --btn-color: var(--primary-color); color: var(--btn-color); }，防止样式漂移 - 真机调试时，部分安卓机型对
style字符串更新有延迟，可加setTimeout(() => {}, 0)强制触发重绘
最常被忽略的是：小程序没有 document.documentElement，所以 Web 端常见的 document.documentElement.style.setProperty('--x', 'y') 在小程序里完全无效；一切变量变更必须走 setData 或 class 切换驱动视图更新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
