uni-app 内置 CSS 变量使用指南：在 view 标签中定义和在 scss 文件中引用

在 uni-app 中，可以通过在 `view` 标签上定义内置 CSS 变量，并在 `scss` 文件中使用这些变量。\n\n首先，在 `view` 标签上定义内置 CSS 变量。在 `view` 标签的 `style` 属性中，使用 `:root` 伪类选择器定义变量。例如，为了定义一个名为 `--status-bar-height` 的变量，可以这样写：\n\nhtml\n<view style=\':root{ --status-bar-height: {{statusBarHeight}}px; }\'>\n <!-- 其他内容 -->\n</view>\n\n\n其中，`{{statusBarHeight}}` 是从数据或者传递给组件的属性中取得的状态栏高度。\n\n然后，在 `scss` 文件中使用这个变量。假设你有一个名为 `styles.scss` 的 `scss` 文件，可以在其中使用定义的变量：\n\nscss\n.my-element {\n height: var(--status-bar-height);\n /* 其他样式 */\n}\n\n\n这样，在编译时，`var(--status-bar-height)` 会被替换为对应的值。\n\n注意：在使用内置 CSS 变量之前，确保你的开发环境支持 CSS 变量，比如在微信小程序中，需要开启'使用 CSS component vars'选项。