css之 变量中的变量 及 花式计算calc

css是我的一个痛点🙈，学了点看起来有点高大上又有点好玩的

变量中的变量

咦，css可以用变量耶，
比如说，有p, h1, h2元素，你设置他们的颜色相同红色，那得每个元素都设置一次红色，如果要把他们都改成其他也是一样的颜色，那也得一个一个元素去找css。而css也是可以设置变量的，

:root 选择器用匹配文档的根元素。

 :root {
     --text-color: rgb(255, 0, 0);	 /* 设置一个变量  */
  }
 p {
   color: var(--text-color)
 }
  h1 {
    --text-color: green;	/* 	给他个特殊的 */
    color: var(--text-color)
 }
 h2 {
     color: var(--text-color)
}

还可以展开的更多

 :root {
 	--r: 255;
 	--g: 0;
 	--b: 0;
     --text-color: rgb(var(--r), var(--g), var(--b));	
  }
 p {
   color: var(--text-color)
 }
  h1 {
    --r: 155;
    color: var(--text-color)
 }
 h2 {
     color: var(--text-color)
}

更多应用：切换主题。

花式计算calc

天上掉下emoji

 div {
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }
        .drop {
            animation: dropIn 1s ease forwards;
            animation-delay: calc(var(--order) * 100ms);
            font-size: 22px;
        }
        @keyframes dropIn {
            from {
                transform: translateY(-500px);
            }
            to {
                transform: translateY(0);
            }
        }

var(–order) 就是设置了变量，在style中可设置order，让他们延迟多少s后执行dropIn动画

<div>
        <span class="drop ace" style='--order: 1'>😍</span>
        <span class="drop deuce" style='--order: 2'>😘</span>
        <span class="drop trey" style='--order: 3'>💩</span>
        <span class="drop trey" style='--order: 5'>💩</span>
        <span class="drop trey" style='--order: 7'>❤️</span>
        <span class="drop trey" style='--order: 6'>❤️</span>
        <span class="drop trey" style='--order: 10'>😜</span>
        <span class="drop trey" style='--order: 8'>💩</span>
    </div>

效果就是。。emoji 从上而下❤️