CSS变量的使用场景

前言

从写下第一篇关于CSS变量的文章《CSS中的变量 》，我就爱上了使用这个小东西（呆在一家不需要考虑浏览器兼容性的公司真舒服啊），后来，我又去学习CSS的进阶知识，学会了如何给一个CSS变量，定义属性和默认值-《带有类型和默认值的CSS变量》。在项目中，我已经开始CSS变量，当然使用SCSS/LESS的项目除外。在日常的使用中，我总结了几个使用CSS变量的极佳场景，本文记录总结一下。

颜色/字体/尺寸的统一

这个无论是CSS变量，还是SCSS变量都是使用最多的场景，日常的开发，设计师通常会给我们一份，样式统一的UI设计。整个网页类似颜色和字体必定是统一的，当然这种由设计稿的项目，即使不使用变量也很容易统一。但是对于独立开发者，制作一个项目，就很容易忽略整体样式的统一。例如RGB颜色值，在开发的过程中，手打肯定是不显示的，肯定是需要复制的，但是你用上了CSS变量，就只需要记住对应的变量名。

:root {  --bk-color: red}

重复值

在日常的开发中，编写的CSS的很多都是会一致的，例如我经常写的一行代码。对