纯css定义样式变量，可全局使用

前言

使用 CSS 变量会是更好的选择，有利于后期更改，精简代码，减少冗余，代码更直观，有利于响应式开发

一、如何全局定义？

借助结构性伪类中的 :root{ } 中，在全局 :root{ } 中定义了一个 CSS 变量，命名为 --xxxx，名字前面一定要注意符号（--）

二、全局引入

在main.js里全局引入

 三、组件内部使用

效果如下:

 

 可以看出字体已经变成红色了