scss变量动态修改_如何动态改变scss中$iconbg: #354052;的变量

网上大部分写法

//common.css
$mainBgImg:var('--bg','url(/img/bg/ldyc.png)');
.theme-star .avue-contail {
  background-image: $mainBgImg;
  background-size: 100% 100%;
//js 这个.theme-star是绑定在<body>上的
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是绑定在<body>上的
document.getElementsByClassName('theme-star')[0].style.setProperty('--bg', 'url(/img/bg/bg_zhu.png)');
到此，圆满结束，后续就可以通过公共文件接口去更改相关的背景图片了
 <view class="dark-bg" :style="{'--text-color': color}"> // 注意这里的 text-color
    <view class="h2">测试组件</view>
      <select-theme></select-theme>
    </view>

推荐文章

正直的镜子 · 【java】java程序CPU占用过高的故障定位分析方法_java程序某一段时间占用cpu过高怎排查-CSDN博客

1 月前

体贴的红金鱼 · 【海棠推文】《当书中的最惨炮灰重生之后》by一蟹不如一蟹（全文番外txt） | 以为万人嫌实则万人迷_哔哩哔哩_bilibili

7 月前

求醉的大熊猫 · 中共云南省委组织部省管干部任前公示公告

1 年前

沉着的红烧肉 · python 处理点云数据并三维显示_python3 将点云转化为三维模型-CSDN博客

1 年前

近视的熊猫 · 旺仔牛奶盲盒职业款_旺仔牛奶职业罐全套_旺仔牛奶职业罐有多少种 - 抖音

1 年前