前端基础之CSS变量

演示一下怎么用

先创建一个正方形

我们注意到宽高是一样的，代码是重复的

重复的代码一定会带来维护上的不便，我这个代码比较少，所以你觉的没啥，但是代码多了以后，维护起来就会非常头疼

css变量怎么写呢 --变量名:值

比如：

--size: 300px;

后面调用的话

width: var(--size)

当我们想改变正方形宽高时，只需要改变--size的值就行

变量可以像css属性一样继承，所以如果有一个变量要整个网页用的话，可以写到html或者:root里

既然是变量，那么我们可以还可以参与计算

为了看起来方便，我们再创建一个子div

我们要让box的padding是宽的20%，那么就可以这么写

padding:calc(var(--size) * 0.2)

让子元素宽高是父元素的一半

父元素改成100px

也没有问题

用来写全局主题

虽然主题色是相同的，但不同的地方透明度不同

改变下主题颜色的透明度，用rgb三个值做变量，底下用rgba调整透明度，如果想预览是什么颜色，可以用注释

如果多个元素动画是一样，但是大小不一样，所以偏移量也不一样，那么就需要写多个动画

只需要在每个元素上设置一个css变量，然后在动画里调用就行了

<div class="box" style="--dotsize: 10px"></div>
<div class="box" style="--dotsize: 5px"></div>

transform:translate(calc(var(--dotsize) * 3),calc(var(--dotsize) - 3))

ok，先说到这里，更多的用法大家自己慢慢挖掘，祝大家早日精通css