使用css3中的var()实现改变scss的变量值

简单使用js控制scss(react同理)

---

相信大家在开发的过程中肯定也遇见不少根据逻辑来控制页面样式问题的需求，又比如我页面很多相同的样式值要修改那么又懒得去找js部分的类名 那这时候就需要根据js设置css了，故此写下笔记以防忘记。

---

提示：以下是本篇文章正文内容，下面案例可供参考

简单来说 setProperty方法接受三个值 第一个是你要修改的属性 (必填) 第二个值是你要替换或者更改的新值 (选填) 第三个值是权重值 (选填) 可选值 ：important，undefined ，‘’

 html 部分
 // 判断条件 如果条件成立则会给css对象设置一个新的值。
 if ( otherUser.length ) {
   document.getElementsByTagName('body')[0].style.setProperty('--width-primary','177.8vh');
 } else {
   document.getElementsByTagName('body')[0].style.setProperty('--width-primary','204.8vh');
 }
scss 部分

```javascript
	// 定义 
	:root {
	  --width-primary: 204.8vh;  //--width-primary  ：变量名，css3有规则
	  --width-primarythree: 93.13vh;
	  --width-primaryhost: 90.13vh;
	}
	$minWidth: var(--width-primary); // 用var来盛放变量名
	$minWidththree: var(--width-primarythree);
	$minWidthHost: var(--width-primaryhost);
	
	// 使用
	.pattern3 {
		width: calc(#{$minWidthHost} * 1.8535);
		height: $minWidththree;
	}

---

总结

文档参考： 利用css3的var()实现运行时改变scss的变量值.
CSSStyleDeclaration.setProperty()
JavaScript CSSStyleDeclaration 对象