vue组件利用css var(--变量)实现动态修改样式

1、简介：var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法非常适用。

2、在css中定义变量用法：

<style>
:root {
  --main-bg-color: coral;  
}

#div1 {
  background-color: var(--main-bg-color);
  padding: 5px;  
}

#div2 {
  background-color: var(--main-bg-color);
  padding: 5px;
}

#div3 {
  background-color: var(--main-bg-color);
  padding: 5px;
}

3、在Vue中使用

<template>
    <div id="test">
        <div class="one-item" :style="{'--oneItemHeight': oneItemHeight}"></div>
        <div class="tow-item"></div>
        <div class="three-item"></div>
    </div>
</template>
    
<script lang="ts">
import {  ref } from "vue";

export default defineComponent({
    name: "Test",
    setup(props, context) {
        let oneItemHeight = ref('200px')

        return {
            oneItemHeight
        }
    },
});
</script>
    
<style scoped lang="scss">
#test {
    width: 100%;
    height: 100%;
    div {
        width: 300px;
        height: 100px;
    }
    .one-item {
        background-color: #CC3333;
        height: var(--oneItemHeight);
    }
    .tow-item {
        background-color: #CCCCCC;
    }
    .three-item {
        background-color: #003366;
    }
}
</style>

补充：在data里面定义一个变量然后给定一个值，后期修改这个值之后，所有依赖这个变量的css样式都会被响应式地修改。css用var()函数来使用这个变量，变量前要加--。