scss中使用变量

1.template中定义初始化变量

 <el-tabs v-model="activeName"  @tab-click="handleClick" :style="{'--tabcolor':tabcolor}" >

2.style中使用变量

<style lang="scss" scoped>
//$tabcolor:green;
// // >>>.el-tabs__item.is-active {
// //     color: red;
// }
 >>> .el-tabs__active-bar{
     background-color: var(--tabcolor);
 }
</style>

3. script中使用修改变量

          changeTabStyle(datatype){
              if(datatype===""){

          }
          if(datatype=="imagedata"){
              this.tabcolor="#46a6ff";
          }
          if(datatype=="querydata"){
            this.tabcolor="green"
          }

          }

还有一种方法：
直接使用变量，不过script引用修改不太方便

<style lang="scss" scoped>
$color:red;
      .scss_content{
        color:$color;
      }
</style>