scss变量动态修改

最近项目需要做动态修改背景图片的功能，然后在网上搜索了一大堆怎么动态修改css变量值的，我这里用的是$mainBgimg;
后来发现都不能用

网上大部分写法

//common.css
$mainBgImg:var('--bg','url(/img/bg/ldyc.png)');

.theme-star .avue-contail {
  background-image: $mainBgImg;
  background-size: 100% 100%;
}

//js 这个.theme-star是绑定在上的
document.getElementsByClassName('theme-star')[0].style.setProperty('--bg', 'url(/img/bg/bg_zhu.png)');

最终写法

前提
上述写法，对于我来说没有效果，甚至原来的背景图片也没有了，原来的写法是这个的

//common.css
$mainBgImg:url('/img/bg/ldyc.png');

网上很多都是这种,解决方法也是这种，那就证明var()设置还是有用的，估计就出在$mainBgImg:var('--bg','url(/img/bg/ldyc.png)');这步了，写法估计有点问题，毕竟这么一写，原来的背景图片都不能用了。
后续，我直接去找css变量的文档，然后就发现了这么一段话。

说明链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

发现华点，这个用法，好像跟第一个用法有点不一样，他是在css属性里面定义变量，变量命名规则在上面展示了，说改就改。

.theme-star {
  --bg: url('/img/bg/ldyc.png')
}
$mainBgImg:var(--bg);

写到这里我就发现是可以用的，原来的背景图片也能展示了，那就证明是对的，完整代码下面

//common.css
//背景图片
.theme-star {
  --bg: url('/img/bg/ldyc.png')
}
$mainBgImg:var(--bg);

//这里不变
.theme-star .avue-contail {
  background-image: $mainBgImg;
  background-size: 100% 100%;
}

//js 这个.theme-star是绑定在上的
document.getElementsByClassName('theme-star')[0].style.setProperty('--bg', 'url(/img/bg/bg_zhu.png)');

到此，圆满结束，后续就可以通过公共文件接口去更改相关的背景图片了