CSS 变量（CSS variable）又叫做“CSS 自定义属性”，通过声明CSS变量来设置通用的颜色、字号等，实现统一页面风格，方便后期维护，减轻开发量。
声明全局变量
在变量名称前加两个中横线 --（使用--是因为$被Sass占用，@被Less占用）
body {
--FontColor: #2C51CD;
--BackGround: #B4D4FD;
}说明：body中声明了FontColor，BackGround的全局变量
我们也可以使用:root{}来存放所有变量，各种值都可以放入css变量中
/* 全局变量 */
:root{
--Colors:#2C51CD;
--fZ16px:16px;
--main-color: #4d4e53;
--header-height: 68px;
--transition-duration: .5s;
--margin-top: calc(2vh + 10px);
--theme-bg: #f1f1f1;
}说明：在:root中声明相当于全局属性，:root选择器是一个伪类，匹配文档的根元素，所有主流浏览器均支持 :root （除 IE8及以下）。
注意：声明变量对大小写敏感（colors和Colors表示两个不同的变量）
读取变量
使用var()函数来读取变量，var函数有两个参数，插入自定义的属性值
var(custom-property-name, value)- custom-property-name 必需，变量名
- value 可选，当属性不存在的时候使用
.box-wraper{
background-color: var(--theme-bg);
}说明：–theme-bg即使用的变量，将变量设置到根元素:root上，下面的元素.box-wraper即可在css中使用这个变量
p {
font-family: var(--fontFamily, "Roboto", "Helvetica");
margin: var(--Margins, 15px 20px 25px);
}说明：第二个参数不处理内部的逗号或空格，都视作参数的一部分
另外，var()函数还可以用在变量声明中
:root {
--color1: pink;
--color2: aquamarine;
--bg: linear-gradient(to right, var(--color1), var(--color2));
}变量值的类型
变量值是一个字符串，可以和其他字符串拼接
:root {
--Hi: 'hello';
--Name: var(--Hi)',world';
}变量值是一个数值，不可以和其他字符串拼接，但可以通过calc()函数，将他们拼接起来
:root {
--pSizeVal: 20;
--pSize: var(--pSizeVal)'px'; // 无效
--pSize: calc(var(--pSizeVal)*1px); // 有效
}变量值带单位，不能写成字符串形式
:root {
--pSize: '20px'; //无效
--pSize: 20px; // 有效
margin-top: var(--pSize);
}变量的作用域
变量的作用域分为全局作用域和局部作用域
在:root中申明的CSS变量即全局作用域的变量，即能够在CSS中任意地方应用；
局部作用域总是可以访问外层作用域或者全局作用域的变量，反之则不可；
<div class="parent">
parent
<div class="child">child</div>
</div>
<style>
.parent {
--bgColor: pink; /* 局部变量 */
color: var(--color); /* 使用子级变量无效 */
}
.child {
background: var(--bgColor); /* 使用父级变量有效 */
--color: red;
color: var(--color);
}
</style>
实际项目开发过程中，都会设置字体颜色，背景色，字体大小等等，页面多次使用，或者项目主题化时，往往要大量修改，增加后期维护成本，我们可以设置一个全局的css文件，声明一些可复用的全局变量，不仅可以统一页面风格，更方便后期维护，大大提高了开发效率。
/* 创建一个 base.css文件 */
:root{
--theme-bg: #f1f1f1;
--color-text: 333; /* 普通字体颜色 */
--color-high-text: blue; /* 高亮文字颜色 */
}
/* vue项目可以在main.js引入 */
@import "assets/css/base.css";
/* 使用 */
body {
background: var(--theme-bg);
color:var(--color-text)
}
.active{
color: var(--color-high-text)
}变量的作用域的强大之处，有助于系统开发代码整洁规范、模块化，当我们想要主题化某一个模块时，可以在当前模块的根元素中设置CSS变量，以便于变量向下传递，而且不会影响其他模块的元素。
注意：合理运用作用域层级和CSS变量赋值，在定义CSS变量时不能出现循环依赖关系，这会导致页面无法加载，尽量避免代码结构过于复杂以及影响页面渲染性能。