# 一、js定义变量

data() {
  return {
    themeStyle: {
      --color: red
    }
  }
}

# 二、使用

1.template

<template>
    <view :style="themeStyle">
        <child :color="themeStyle['--color']"></child>
        
    </view>
</template>

2.css

view {
  color: var(--color)
}

# 三、修改

 this.themeStyle['--hhbColor'] = '#ccc'

# 四、权重问题

如果每个元素都有同一个变量名的情况下，css变量优先使用最近的（同js作用域）

# 五、为什么这样写

1. uniapp app环境，预处理器的exprot不会生效，只开发h5可以使用
2. uniapp app环境，不能通过修改dom的属性修改css变量值

参考 https://www.zhangxinxu.com/wordpress/2018/11/html-js-set-css-css3-var%E5%8F%98%E9%87%8F/ https://www.zhangxinxu.com/wordpress/2016/11/css-css3-variables-var/ https://www.jianshu.com/p/8e286c0f9918