js动态修改scss和stylue变量值

1.在style标签中定义
//:root在最外层的组件定义就行，其他子组件内不用重新定义，可以直接使用
:root {
–width-primary: 1rem;
}
2.使用
.test{
font-size: calc(var(–width-primary) + 1rem);
}
3.js中修改变量值
document.getElementsByTagName(‘body’)[0].style.setProperty(’–width-primary’, ‘1rem’);

补充：还可以通过以下方式来定义变量
1.在style标签中定义引用
$textSize: var(–test, 1rem);
.test{
font-size: $textSize;
}
2.在js中修改
document.getElementsByTagName(‘body’)[0].style.setProperty(’–test’, ‘12rem’);