css变量
官方认可的一种自定义属性，就是根据我们自身实际的需求定义属性名称和属性值。
如何定义一个css变量？
css变量的声明与我们在JS语法环境中正常声明一个变量的规则相同，可以是字母、数字、下划线、中划线的组合，但是不能数字打头。
在我们声明的变量前面加上两个减号（--）就形成了，符合标准的css变量
如：
div {
--size:100px;
--si-ze:100px;
}
注意：属性名严格区分大小写
还有一个特点：计算时有效性，自定义属性值可以是任何内容，就算是不是css内有效的数值，只要属性名符合要求，在使用自定义属性的地方，最终计算结果是有效的就行了
获取css变量属性值
在css中官方提供了一个var()方法来获取自定义属性的值，可以在多个地方获取。
如获取上面的--size：
:root {
--size:100px;
--si-ze:100;
}
span {
font-size:var(--size)
}
另外css还提供了calc()方法，可以对我们的自定义属性值进行计算，
如：
font-size:calc(var(--si-ze)) * 2px
css变量的用途
1、提取相同的属性
例如我们在一个模块中很多个地方都是使用相同的属性，我们就可以使用自定义属性提取这个属性，需要使用的地方用var()方法获取。
当我们需要修改这些地方的颜色时，只用修改我们自定义的css变量
2、简化相似代码
......
还有很多用法，还可以结合JS来实现一些效果。
css变量的作用域问题
当我们在多个css选择器中定义了同一个变量名，不会存在问题，因为每一个css选择器中就相当于一个作用域，相互不会影响。
当我们在var()方法取变量值时，先访问自己存在的这个css选择器内是否存在这个变量，如果没有就会往它的上级查找，一直找到根标签的选择器。
举个例子：
元素节点结构：
<div class="box1">
<div class="box2">
<div class="box3">
<div class="box4"></div>
</div>
</div>
</div>
style标签中：
.box2{
--color:blue;
}
这时我们在box2中定义了一个变量，那么box3和box4作为它的子级元素就可以访问这个变量，正是我们所说的往上级查找；但是box1不能反向查找。
如果你在学习JS时会函数的作用域，那么这个对你来说也是非常容易理解的。
变量并不总是有效可用的，而限定变量的可用性范围就是变量的作用域。而CSS变量在CSS层次结构中声明的位置，决定了它在整个层次结构中的可用性范围。
我们受限的可用性范围称为局部作用域，上述这个例子的变量就是一个局部作用域，位于它的上级层次结构中无法获取这个变量，只能供它的子级层次结构获取使用。与之相对的就是全局作用域
全局作用域
我们在编写代码的时候，对于一些变量我们需要全局都能够访问到它。
那怎么做呢？
答：将其变量声明在根标签的选择器中，我们一般用:root{}，这是一个伪类选择器，选中的是根元素，也就是html标签。我们在这里面声明的变量在全局下都能够访问，这样一个全局变量就声明成功了。
变量的默认值
我们在var()获取css变量时，有一种情况是所取得变量未被赋值，那么就会取我们设置得默认值。
写法：color:var(--color,"blue")
//意思就是--color，未取到值得时候，color取blue
当使用var()函数时，可以分配一个或多个回退的属性值（使用逗号分隔），比如设置字体：
html { font: var(--fonts, Helvetica, Arial, sans-serif); }当--fonts未取到值时，font得值就为 font: Helvetica, Arial, sans-serif
还可以使用一连串的变量回退，但需要使用var()嵌套起来：
color:var(--color,var(--color1,"blue"))
//意思即为首先取--color,如果未取到就去取--color1，如果还没取到就是blue
补充：css变量的值也可以为一个其它的css变量
变量提升
和JavaScript一样，CSS变量声明可以被提升，即CSS变量可以再声明之前使用他们。在浏览器渲染相应的HTML元素样式前，会将CSS变量的声明提升并移动到CSSOM的最顶部。