js传递值给css引用

https://www.cnblogs.com/llcdbk/p/14044176.html 参考原文

JS：

document.getElementsByTagName('body')[0].style.setProperty('--name', `100px`)  //name为传递过去的名字

scss：
:root {
--name：auto  //初始值
--flop-background: auto; //需要在这里初始化
--width-primary: 240px;
}
$flopBackground: var(--flop-background);   //使用传递过来的值  全局化
div {
background: $flopBackground;  //引用全局化
width: var(--name);//不声明美元符号变量就直接引用也可以 color:transparent;
background-clip: text;//这个属性要写到background后面，且目前只有chrome可用
// -webkit-background-clip: text;//如果打包后没有加入前缀需要自己手动声明一下
}

总结
利用 setProperty方法 设定一个值 在scss里面 var（设置值的名字） 来使用即可