CSS变量

一、基础变量

通过--variableName创建样式变量，
使用var(--variableName)调用变量。

备用值
写在调用变量后，用逗号分隔

var(--variableName,defaultValue);

当–variableName不存在时、或浏览器不支持时调用备用值。（备用值可以不写，写上能方便及时发现问题、预防风险）

.className{
    --color: pink;
}
.className2{
    color: var(--colorName, red);
}
.className3{
    color: var(--colorName);
}

二、层级CSS变量

创建的层级变量不仅可以在声明的变量里使用，也可以在该元素的子元素里使用。
:root 在它里面创建的变量，整个网页都有效

:root{
    --color: pink;
}

三、更改特定区域的变量

:root里定义的变量作用整个页面。如果元素里也创建了相同的变量，则会把root里的层叠掉。

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

例：当屏幕宽度小于350px时，–colorValue值变为red，应用了这个变量的元素样式便会发生改变

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