vue中css变量的使用

1、在css中使用变量

(1)css中声明变量

--color：red

(2)使用变量

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

2、使用vue中的变量

(1)在html标签中

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

data中声明变量color

data() {
  return {
    color: red,
  };
}

或者使用this.$refs.devcolor.style.setProperty('--color',this.color) (2)css中使用color变量

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

箴言：因为这些东西是非常简单的。不要抱怨自己学不会，那是因为你没有足够用心。