出道曲神秘巨星来了？快，跟着光，快，给她一枪。------《神秘巨星》神秘巨星是谁？它是CSS变量。CSS变量简介，这不是什么新鲜事，但绝对是css的一场革命。之前在使用变量的时候，需要借助sass、less等预处理工具。现在我们可以直接使用css来声明变量了。兼容性是老规矩，我们先来看看兼容性。兼容性是绿色的，还有两个红色的？做大事怎能拘泥于小细节？让它去枪。语法语法有点丑但是很简单，--*声明变量名，var(--*)来使用，也许你要问，为什么要用--而不是$，唉，那不是sass，less这个产品有用吗？声明和使用必须放在{}代码块体{--bg-color:lightblue;background-color:var(--bg-color);}代码是不是很简单，直接看效果，就不赘述了。全局变量和变量覆盖：根代码块中声明的变量是全局变量，局部变量会覆盖全局变量：root{--bg-color:red;}body{--bg-color:lightblue;background-color:var(--bg-color);}最后生效的是--bg-color:lightblue，bg-color变量的值成为lightblue变量的默认值完整的变量使用语法var([,]?),未定义变量时，将使用以下值。请看下面的示例body{--1:red;color:var(--2,blue);}上面的代码将在body的范围内搜索--2变量。如果没有变量，它将搜索全局变量。将使用后一个值，因此最终有效颜色为蓝色。可以看到我们上面的变量名直接用了number?，css变量很酷，不仅是数字，汉字都是可以的。参与计算：root{--bg-color:lightblue;--文字颜色：白色；--fong-size:30;}body{background-color:var(--bg-color);}div{color:var(--textcolor);font-size:var(--fong-size)px;}此时div中的文字大小是多少？这是浏览器的默认大小。为什么不是我们想象的30px呢？这是因为变量转换的时候最后会有一个空格，var(--fong-size)px会被转换成30px。我们可以老老实实声明变量带上单位--fong-size:30px;或者使用calc()计算属性字体大小：calc(var(--fong-size)*1px);js的获取和赋值我们可以用js来获取和赋值css变量，你看，是不是很方便，老铁。:root{--bg-color:lightblue;}//获取getComputedStyle(document.documentElement).getPropertyValue('--bg-color')//lightblue//赋值document.documentElement.style.setProperty('--bg-color','yellowgreen')简单应用上面我们介绍了css变量的声明和使用以及使用js获取和赋值的操作。接下来，我们完成了一个聚光灯效果（我自己做的，不知道应该叫什么），不对，是这个样子的。GIF图有点卡？等待它。在写代码之前，先梳理一下思路。如何实现这个效果，主要有以下步骤1.声明全局css变量2.设置body为纯黑色背景，添加一个div并设置背景图3.使用clip-剪切div的背景图-path，并使用变量设置中心位置4.添加鼠标事件，动态改变css变量，也就是中心位置。接下来开始写代码。布局很简单，就是一个div，我们主要说一下css样式：root{--x:40;--y:40;}*{填充:0;边距：0；}正文{宽度：100vw；高度：100vh；背景：#000；}div{宽度：100%；高度：100%；背景：url('../images/bg.png')00不重复；剪辑路径：圆（100pxatcalc（var（--x）*1px）calc（var（--y）*1px））；background-size:cover;}使用*通配符简单粗暴的干掉浏览器默认样式，将body设置为100%。这里，使用了vw和vh单位，也就是说视口会被等分成100份，100vw就是100份宽或者100%宽，vh也是一样的。重点来了，用css声明两个变量--x和--y，然后在div样式中裁剪时使用clip-path：circle(100pxatcalc(var(--x)*1px)calc(var(--y)*1px))，我们使用clip-path来裁剪一个圆，其语法如下clip-path:circle(圆心X轴坐标的半径，圆心Y轴坐标)了解更多关于clip-path，请点击?此时，页面上会出现一个这样的圆圈。最后一步，我们添加鼠标跟随事件并改变--x和--y的值,e.clientX)document.documentElement.style.setProperty('--y',e.clientY)})至此，我们使用css变量完成了一个简单的效果，css变量还有更多的使用场景，请给全播放它。详细代码请移步github总结1.可以嵌套：root{--green:green;--bgcolor:var(--green);}2.非法变量div{--color:10px;背景色：黄色；background-color:var(--color,green);}此时div的背景色是什么？Argba(0,0,0,0)B10pxC黄色D绿色答案是A简单的说变量声明的时候是非法的，背景色显然不能是10px，所以浏览器会使用默认值，这是默认值，不是变量的默认值，是浏览器自己的默认值background-color:var(--color,green)会变成background-color:rgba(0,0,0,0)
