此处为scss使用方法

一、vue2 :

:style="{'--color': bgColor}"

将样式变量和js变量关联 background-color: var(--color);

使用样式变量

<template>   
    <view class="tabbar">     
        <view :key="index" class="item" :style="{'--color': bgColor}">                
        </view>
    </view>
</template>
<script>
    export default {     
        name: "",     
        props: {       
            bgColor: {type: String,default: '#fff'}
        }   
    } 
</script>
<style lang="scss" scoped>   
.tabbar {
    .item {
        &:nth-of-type(3) {
            border-radius: 50%;
            background-color: var(--color);
        }
    }
} 
</style>

二、vue3 ：

核心：let fontcolor = ref('red');

color: v-bind(fontcolor);

使用样式变量

<template> 
    <p>父组件</p> 
</template> 
<script setup lang="ts"> 
    import { ref } from 'vue'; 
    let fontcolor = ref('red'); 
</script> 
<style lang="scss" scoped> 
    p{ 
        color: v-bind(fontcolor); 
    }
</style>