CSS变量

一、基础变量

css也支持变量哦，把需要更改的地方设置成变量，一处设置，多处改变。

请看栗子：
通过--variableName创建样式变量，
使用var(--variableName)调用变量。
备用值
var(--variableName,defaultValue)：

1. --variableName不存在的时候（移除则看到备用值的效果）
2. 浏览器不支持，则应用备用值,当然你也可以不写备用值，但写上能方便及时发现问题，预防风险，对调试也有帮助。

.className {
    --colorValue:gray
}
.className2 {
    color: var(--colorValue, red);
}
.className3 {
    color: var(--colorValue);
}

二、层级 CSS 变量

什么是层级变量？
你创建的变量不仅可以在你声明的变量里面使用，也可以在该元素的子元素里使用。
:root它就好像是html是body的容器一样，
:root 在它里面创建的变量，整个网页都生效。

 :root {
    --colorValue:pink;
  }

三、更改特定区域的变量

:root里面定义的变量的作用域是作用于整个页面的，如果元素里也创建了相同的变量，则会把它给覆盖掉。

例子：将变量原来的颜色改为黑色

.className {
    --colorValue:black;
}

四、使用媒体查询更改变量

当屏幕的宽度小于等于350px的时候，
--colorValue的值会被改变为red，那么应用了该变量的元素的样式则会发生响应式修改

 @media (max-width: 350px) {
    :root {
     --colorValue:red;
    }
  }