vue组件中使用 css 变量 var()

1.定义变量

:root {
  --col2-fontsize: 0.5rem;
}

ps: 可在全局common.scss中定义

2.使用变量

    var(变量名)

（1）同一文件里引用

.el-button {
  margin: 0 auto;
  padding: 0 0px;
  // padding: 9px 0px;
  border-radius: 0px;
  
  // font-size: $fontSizeSubHead;
  font-size: var(--col2-fontsize);
}

 （2）vue 组件中引用

index.html中引入外部scss文件后，在某一组件中：

.menubar-logo {
    font-weight: 500;
    font-size: var(--col2-fontsize);
}

3.改变变量

 调用document可进行修改

document.body.style.setProperty('--col2-fontsize', '1rem');