为了统一页面风格在编写CSS样式文件时经常会大量复用相同的颜色或者字号，加重开发工作量的同时也不利于后期的维护，所以需要用到CSS全局变量。
CSS全局变量声明与使用
1、新建css 文件用于存放全局变量：var.css
2、文件内使用 :root{} 来存放所有变量，如新建变量 --titleHeight（css全局变量必须以--开头）
3、引用时需要使用 var()函数，var 函数还可以接收第二个参数，表示变量的默认值，如果变量不存在，则会使用该默认值。
SCSS全局变量声明与使用
1、新建一个存放全局变量的 scss 文件：_variable.scss
2、文件内定义全局变量: $titleHeight:50px（ SCSS 全局变量命名必须以$号开头）
3、在 vue.config.js 内配置全局变量文件全局引用
4、scss 样式内使用全局变量
总结：scss文件内也可以使用 var(--titleHeight)的方式引用 css 的全局变量，css 文件内则不可以使用 scss内定义的全局变量 $titleHeight，而且SCSS还需要在配置文件vue.config.js内进行相关配置，所以个人建议使用CSS的方式来定义全局变量。
