vue中css使用变量

1、在css中使用变量

1、css中声明变量

--color：red

2、使用变量

color:var(--color)   //color:red获取到全局声明变量值为red

2、使用vue中的变量

1、再htm标签中

<span :style="{'--color':变量color}" ref='devcolor' />

data中声明变量color

data(){

retrun {

color:red}}

或者使用this.$refs.devcolor.style.setProperty('--color',this.color)

2、css中使用color变量

color:var(--color)  //使用变量color：red

3、vue2不可，3ke

1、在data中声明变量color：red

2、在css中使用变量color

<style vars="{变量color,多个用逗号隔开}">

color:var(--color)

</style>