1。项目需求由于多个老项目需要采用统一的样式，需要约定一个css变量文件。每个项目都可以随时导入，无需调整自己的预处理器。这时候css的原生变量就是最好的选择，这样less和sass都可以使用同一个全局css变量配置文件，之前没有用过全局变量配置的less项目就不需要再安装新的包了.进行变量处理。2.什么是CSS3原生变量？其实它们和less中的变量是一样的。定义的变量在使用时被引用，方便更好的管理css。感觉css总有一天也会有功能的。。。但是定义变量的格式要求必须是--开头，因为@等符号已经被其他预处理占用了。看兼容性，不用IE就没有问题。CSS中原生的变量定义语法是：--*，使用语法是：var(--*)，其中*代表我们的变量名，这里用的是英文名。如果我尝试中文名称，就会出现兼容性问题。下面是最简单的使用方式，全局定义一个颜色，这样在任何css样式中都可以引用这个变量。:root{--main-color:#008080;}body{backgroud-color:var(--main-color);}三、工程实践我现在的项目用的比较少，可以轻松引入一个css变量文件，varables。css，里面定义了各种需要用到的全局变量。:root{--main-color:#008080;--main-font-size:16px;}然后在app.vue入口导入css变量文件：可以在任何组件的less或css中引用变量。4.更多神奇的用途到此为止，我的css变量需求已经满足了，但是仔细一看，这个功能确实不错，还有很多其他的好处。最厉害的是可以和js或者响应式布局结合使用。在某些情况下，直接修改css变量的值就可以实现样式的动态变化。参考张新旭大师。
