此处为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>