使用CSS变量，让你的CSS更精彩

前言“CSS变量”也叫“CSS自定义属性”。怎么突然提这个很少人用的东西？因为最近重构了自己的官网，不知道为什么突然喜欢用“CSS变量”。或许它隐藏的魅力让笔者为之倾倒吧。说到CSS为什么要用变量，我们举个栗子，估计大家一看就明白了。/*不使用CSS变量*/.title{background-color:red;}.desc{background-color:red;}/*使用CSS变量*/:root{--bg-color:red;}.title{background-color:var(--bg-color);}.desc{background-color:var(--bg-color);}看完之后，你可能会觉得使用“CSS变量”的代码量是有点多，不过有想不到有一天，邪恶的策划师兄和设计小姐姐说要做一个换皮功能。按照通常的思路，估计有的同学会根据默认的颜色主题添加一个新的颜色主题CSS文件进行对比。每次有新的需求要同时维护好几套主题色是多么的麻烦啊。这时候，“CSS变量”就派上用场了。可以事先和设计小姐姐指定需要更改的颜色，通过“CSS变量”定义，通过JS批量操作这些定义好的“CSS变量”。这也是“换主题色”的解决方案之一。好处是只需要写一套CSS代码。["red","blue","green"].forEach(v=>{constbtn=document.getElementById(`${v}-theme-btn`);btn.addEventListener("click",()=>document.body.style.setProperty("--bg-color",v));});这里总结一下在CSS中使用变量的好处：减少样式代码的重复增加样式代码的可扩展性提高样式代码的灵活性增加一种CSS和JS之间的通信方式，无需深入遍历DOM来改变某个style可能有同学会问，Sass和Less都已经实现了变量的特性，何必呢。但是仔细想想，“CSS变量”相对于Sass和Less的变量还是有它的优势的。浏览器的原生特性可以直接运行DOM对象的一个??成员，不需要任何的翻译，极大的方便了CSS和JS的衔接如果有很多，感觉没必要。贴上阮一峰老师写的教程《CSS变量教程》。同时笔者也对“CSS变量”的细节进行了整理，方便大家记忆。声明：--变量名读作：var(--变量名，默认值)typenormal：只能作为属性值，不能作为属性名字符：与字符串“Hello,”连接var(--name)value:使用带有数值单位的calc()，使用var(--width)*10px作用域：在当前元素块作用域及其子元素块作用域范围内有效优先级：内联样式>ID选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器下面通过几个特殊场景来展示“CSS变量”的魅力。还是那句话，“有使用场景的东西，自然就有它的价值”，用的人会越来越多。使用场景事实上，“CSSVariables”有一个特别有用的场景，那就是可以和List元素的集合结合使用。如果您不明白这是什么，请继续阅读。下面所有的demo代码都是基于vue文件，但是html、css、js是分开写的。为了简化CSS编写，使用Sass进行预处理，方便代码演示。一个barloadingbar通常由几行组成，每行对应同一个动画不同的延时，通过时间差运行同一个动画产生loading效果。估计大部分同学可能会把CSS代码写成下面这样。.loading{width:200px;height:200px;li{border-radius:3px;width:6px;height:30px;background-color:#f66;animation:beat1sease-in-outinfinite;&+li{margin-left:5px;}&:nth-child(2){animation-延迟:200ms;}&:nth-child(3){animation-delay:400ms;}&:nth-child(4){animation-delay:600ms;}&:nth-child(5){animation-delay:800ms;}&:nth-child(6){animation-delay:1s;}}}分析代码发现每个