我们在开发是如果遇到开发的项目会被集成的对方的项目里时 经常会因为主题风格不统一而面临修改样式 若果只通过第三方给的变量来改变css类名 就会出现我要接几个项目 就得写几组样式每次修改还得发包 这样既不利于维护 开发成本也高 那么这时候就用上 css var()变量 及 style.setProperty()方法

了解style.setProperty()，css var()

css var()：

var(): 定义一个名为 “- -随机(英文不带数字)” 的属性，然后使用 var() 函数调用该属性

例子：

1
2
3
4
5
6
7
8
9
10
11
12
:root {
  --main-bg-color: coral;
}

#div1 {
  background-color: var(--main-bg-color);
}

#div2 {
  background-color: var(--main-bg-color);
}

兼容性：

style.setProperty()：

style.setProperty()：用于设置一个新的 CSS 属性，同时也可以修改 CSS 声明块中已存在的属性

例子：

1
2
var declaration = document.styleSheets[0].cssRules[0].style;
var setprop = declaration.setProperty("background-color", "yellow");

兼容性：

详细了解
style.setProperty() ==> https://www.runoob.com/jsref/met-cssstyle-setproperty.html
css var() ==> https://www.runoob.com/cssref/func-var.html

scss实际引用：

第一步：

1
2
3
4
5
6
body {
  --HomeTheme: #26AF8C;  //主题色
  --HomeColor: #26AF8C;  //字体颜色
  --HomeBorder: #26AF8C;  //边框颜色
  ...//等等
}

第二步：

1
2
3
4
5
6
7
8
9
10
$theme:var(--HomeTheme,#26AF8C)；
$themeColor:var(--HomeColor,#26AF8C)；
$themeBorder:var(--HomeBorder,#26AF8C)；
//scss可抛出去直接使用

@mixin themeStyle( $bg_c:$theme , $th_c:$themeColor , $th_b:$themeBorder){ //@mixin 后面的函数名称为自定义。
  background-color: $bg_c;
  color:$th_c,
  border:1px solid $th_b
}

第三步：

1
2
3
4
5
6
7
8
var obj={ //示例数据
  HomeTheme: #26AF8C;
  HomeColor:#26AF8C,
  HomeBorder: #26AF8C
}
for(key in obj){
  document.getElementsByTagName('body')[0].style.setProperty('--'+key, obj[key])
}