vue使用css变量

// html 模板 template
 <span class="red" :style="styleVar" @click="add">as</span>
 // js
 data() {
    
    
    return {
    
    
      styleVar: {
    
    
        "--colorBlue": "blue",
        "--colorRed": "red",
        "--fontSize": "30px",
        "--fontSizeTest": "30px",
      },
      size: 30
    };
  },
  // methods
 add () {
    
    
      this.size++
      this.styleVar['--fontSize'] = this.size + 'px'
    }
  // css
 .red {
    
    
  color:  var(--colorRed);
  font-size: var(--fontSize);
}