总结一下CSS中变量的应用场景

前言

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

颜色/字体/尺寸的统一

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

:root {  --bk-color: red}

重复值

在日常的开发中，编写的CSS的很多都是会一致的，例如我经常写的一行代码。对于这行种代码，我需要在很多地方用到。此时我就会有两个解决方案。1. 把这行代码放在一个单独的class中。2. 把这行代码定义为变量。

border:solid 1px #ddd;

:root {  --bd:border:solid 1px #ddd;}

相信需要考虑兼容性的童鞋，因为浏览器厂商前缀的存在，可能一个CSS属性，可能就要写好几遍，一些简单的代码，还可以接受，但是类似linear-gradient(),这种属性值，复杂的话可能有几百个字符。下面是我随手百度到的渐变，此时我们就应该是将这个渐变，定义为一个变量。

 linear-gradient(45deg,transparent 50%, white 50%),linear-gradient(135deg, white 50%,rgba(0, 0, 0, 0.774) 62%,white 62%,white 69%,rgba(255, 166, 0) 69%,rgba(182, 25, 51) 81%,#fff 81%,#fff 88%,rgb(89, 176, 247) 88%,rgb(170, 12, 190) 100%);

浏览器厂商前缀

• -webkit- Chrome 苹果浏览器

• -moz- 火狐浏览器

• -ms- IE系列浏览器

• -o- 欧朋

响应式布局

对于这种用法，我也是在看了大佬的代码之后，才学会的。例如：我本人在项目中，布局的话，最近用的比较多的就是grid布局了。假设我们在PC端有8列，但是移动端就是4个。此时我们通常的做法是媒体查询中定义 grid-template-column。在此基础上，用上CSS变量就更简单:

:root {
  --clm: 8;
}

@media (max-width: 375px) {
  :root {
    --clm: 4;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--clm), 1fr);
}

配合JS

因为CSSStyleDeclaration.setProperty()的存在，我们可以很方便的操作CSS变量，例如我之前写的《巧用CSS变量实现渐变跟随鼠标》，巧妙地操作了，渐变的位置。

后记

人呐，学东西还是要成体系的。零零散散的大抵还是不行的。此文仅总结我对CSS变量，学到的一些知识。日后若是有新用法新场景，也会整理进来！