前端基础之 CSS 变量#
演示一下怎么用
先创建一个正方形
我们注意到宽高是一样的，代码是重复的
重复的代码一定会带来维护上的不便，我这个代码比较少，所以你觉的没啥，但是代码多了以后，维护起来就会非常头疼
css 变量怎么写呢 -- 变量名：值
比如：
--size: 300px;
后面调用的话
width: var(--size)
当我们想改变正方形宽高时，只需要改变 --size 的值就行
变量可以像 css 属性一样继承，所以如果有一个变量要整个网页用的话，可以写到 html 或者里
既然是变量，那么我们可以还可以参与计算
为了看起来方便，我们再创建一个子 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