定义：
.penguin {
--penguin-skin: gray;
}
使用：
.penguin-top {
background: var(--penguin-skin,, black);//当你的变量有问题的时候，它会设置你的背景颜色为黑色
}
你创建的变量，不但可以在你声明变量的元素里面使用，同时也可以在该元素的子元素里面使用。这种效应称为cascading（层叠）。
因为层叠的效果，CSS 变量通常会定义在:root元素里。
就像html是body的容器一样，你也可以认为:root元素是你整个 HTML 文档的容器。
在:root创建的变量，在整个网页里面都能生效。
:root {
--penguin-belly: pink;
}
当你在:root里创建变量时，这些变量的作用域是整个页面。
如果在其它元素里创建相同的变量，会重写:root变量设置的值。
使用媒体查询更改变量：
当屏幕小于或大于媒体查询所设置的值，通过改变变量的值，那么应用了变量的元素样式都会得到响应修改。
在media query（媒体查询）声明的:root选择器里，重定义--penguin-size的值为 200px
:root {
--penguin-size: 300px;
}
@media (max- 350px) {
:root {
--penguin-size: 200px;
}
}