CSS中用统一变量控制整体风格

背景

手写CSS会有个问题就是我们经常会想到什么写什么，例如颜色代码，阴影参数等，如果每个变量都单独到一个css字段中的话，到使用的时候，class会比较长，可以去记的话还不如直接学习像tailwind之类的规范了。但是用var进行CSS参数进行统一变量还是比较合适的，尤其是在客户说要修改整体风格的是就很容易进行修改

代码

代码方式也很简单，在CSS中统一变量

:root {
	--blue: #1e90ff;
 }

使用的时候也很简单，eg:

.top{background:var(--blue)}

案例

例如统一页面颜色的时候我们会使用主色，辅助色，标题字号，正文字号等就可以直接写在root中进行统一定义

:root{
	--mainColor: #3498db;
	--auColor: #5BC0EB;
	--titleSize:18px;
	--contentSize:14px;
}

这样后续在使用的时候就能统一风格，再做修改的时候也更简单，不再需要批量替换和逐个检查了。