原生CSS变量

1.CSS变量的作用

将某一种css方案进行统一管理，例如：为了保持一种配色方案，在这个配色方案中会有一些颜色经常重复出现在CSS样式表中。如果想要修改配色方案，不论是想单独修改某个颜色或是整套配色，都不是一个简单的问题，而且很容易出错。

2. 定义格式

两个- -开头

定义变量

• - - 变量名

使用变量

• var(变量名)

2.1全局css变量

:root全局css ,固定写法

/* 1 创建全局 CSS 变量 --geek-color-primary*/
:root {
  --color: red;
}
.box{
color:var(--lolor);
}//box里面的 文字变为红色

2.2 局部css变量

/* 
  局部 CSS 变量
*/
.list {
  --bg-color: blue;

  /* 在该 类 内部使用改变量 */
  background-color: var(--active-color);
}

图示：

css变量特点

1. 改变变量样式，依赖此变量的都会随之改变
2. 可以用来统一主题，通过修改变量改变主题样式