利用css3的var()实现运行时改变scss的变量值

1.var()使用

只能在{}内声明,作用范围由{}的选择器决定

<!-- 声明 -->
body{
  --name:value;//body内有效
}


<!-- 使用 -->
.test{
  attr: var(--name,defaultValue) //当--name不存在时,使用defaultValue
  
  var(--name):#369;//错误使用方式
}

CSS中原生的变量定义语法是：–，变量使用语法是：var(–)，其中*表示我们的变量名称。

但是，不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合，但是可以是中文，日文或者韩文。

2.运行时改变scss变量值

简单来说就是将scss的变量交由css变量控制

$colors: (
  primary: #FFBB00,
  secondary: #0969A2
);

Selector1{
  @each $name, $color in $colors {
    --color-#{$name}: $color;
  }
}

<!-- Selector1的生成效果 -->
:root {
  --color-primary: #FFBB00;
  --color-secondary: #0969A2;
}


<!-- 使用方式一  直接使用css变量 -->
Selector{
  color:var(--color-primary);
}

<!-- 使用方式二 利用scss的函数,以符合scss语法 推荐 -->  
@function color($color-name) {
  @return var(--color-#{$color-name});
}

body { 
  color: color(primary); //使用
}

<!-- body生成效果 -->
body { 
  color: var(--color-primary); //这样就可以被js设置了
}

js设置css变量,即设置运行scss变量

  domObject.style.setProperty(name,value);//name为css变量名 e.g: --color-primary

3.项目中使用

:root {
	--basic-font-size: 14px;
}

.default-theme {
	  --red-ff8787: #ff8787;
}

.default-theme .newIcon span {
	color: var(--red-ff8787);
	font-weight: bold;
	font-family: PingFangSC, PingFangSC-Medium;
}

转载于 https://blog.csdn.net/weixin_44392565/article/details/85755592