JS变量注入到sass的写法

以vue的项目为例如下：

 

<template>
  <div>
    111
  </div>
</template>
<script>
export default {
  name: 'Test',
  mounted() {
    document.getElementsByTagName('body')[0].style.setProperty('--flop-background', `linear-gradient(red 0%, green 90%)`)
    document.getElementsByTagName('body')[0].style.setProperty('--width-primary', `100px`)
  },
}
</script>
<style lang='scss' scoped>
:root {
  --flop-background: auto; //需要在这里初始化
  --width-primary: 240px;
}
$flopBackground: var(--flop-background);
div {
  background: $flopBackground;
  width: var(--width-primary);//不声明美元符号变量就直接引用也可以
  color:transparent;
  background-clip: text;//这个属性要写到background后面，且目前只有chrome可用
  // -webkit-background-clip: text;//如果打包后没有加入前缀需要自己手动声明一下
}
</style>