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>