在vue2项目，CSS使用JS变量

vue2中使用css使用js变量需要3步：

1. 定义这个变量, 可以在data中，也可以用prps接收。一般使用--开头来定义key

data() {
    return {
    divStyle: {
        "--color": "red"
     },
     widthVar: "100px"
    }
    
 props: {
     height: {
      type: String,
      default: '56px'
    }
 }

2. 在标签中使用:style绑定变量、对象。

    <div class="nav-bar" :style="{'--height': height}"></div>
    <div class="nav-bar" :style="spanStyle"></div>

3. 在css中使用

    div {
        height: var(--height);
    }
    .nav-bar {
        color: var(--color);
    }

over