Vue如何使用CSS自定义变量

<style>
div {
    --bg-color : pink; //定义变量
    color : var( --bg-color ) // 通过var函数使用变量
}
</style>
<div>hello</div>

<style>
div {
    --bg-color : pink; //定义变量
    color : var( --bg-color ); // 通过var函数使用变量
}
div:hover {
    background-color : var( --bg-color );
}
div span {
    background-color : var( --bg-color );
}
</style>
<div>hello <span>world</span> </div>

<style>
div {
    color : var( --bg-color, pink ); // 第二个参数为默认值
    background-color : var( --bg-color ,--color,--a,red );// 你甚至可以设置多个变量，它从左到右依次查找
}
</style>
<div>hello</div>

<template>
	<div class="box" @click="changeColor" :style="{'--a' : a}">hello</div>
</template>
export default {
  data(){
    return {
      a : 'blue',
    }
  },
  methods: {
    changeColor(){
      this.a = this.a === 'blue' ? "red" : "blue"
    }
  }
}
</script>
<style>
  .box {
      color : var(--a);
  }
  .box:hover {
    background-color : var(--a);
  }
</style>

// 父组件
<template>
	<div class="box"  :style="{'--a' : a}">hello <Child></Child></div>
</template>
export default {
  components : {
      Child
  },
  data(){
    return {
      a : 'blue',
    }
  }
}
</script>

// 子组件 Child
<template>
  <span>world</span>
</template>

<style lang="less">
  span {
      color : var(--color);
  }
</style>

   // vue3 自定义指令。
      function change(el,binding){
        for(let [key,value] of Object.entries(binding.value)){
            el.style.setProperty('--'+key, value);
        }
    }
  app.directive(css, {
        mounted(el,binding){
            change(el,binding)
        }
        updated(el, binding) {
            change(el,binding)
        }
       
    })

<template>
	<div v-css="{a,b}" class="box" @click="changeColor"></div>
</template>
export default {
  data(){
    return {
      a : 'blue',
      b : 'pink'
    }
  },
  methods: {
    changeColor(){
      this.a = this.a === 'blue' ? "red" : "blue"
      this.b = this.b === 'pink' ? "yellow" : "pink"
    }
  }
}
</script>
<style>
  .box {
    width : 100px;
    height : 100px;
    background-color : var(--a);
  }
  .box:hover {
    background-color : var(--b);
  }
</style>