CSS终于也有变量了，原生 CSS 从此变得异常强大。
CSS变量又名CSS自定义属性，指可在整个文档中重复使用的值。它由自定义属性--var和函数var()组成，var()用于引用自定义属性。
谈到为何会在CSS中使用变量。示例：
1 /* 不使用变量 */ 2 .title { 3 background-color: red; 4 } 5 .desc { 6 background-color: red; 7 } 8 9 /* 使用变量 */ 10 :root { 11 --bg-color: red; 12 } 13 .title { 14 background-color: var(--bg-color); 15 } 16 .desc { 17 background-color: var(--bg-color); 18 }
CSS使用变量有如下好处。
- 减少样式代码的重复性
- 增加样式代码的扩展性
- 提高样式代码的灵活性
- 增多一种CSS与JS的通讯方式
- 不用深层遍历DOM改变某个样式
可能有些同学会问，sass和less早就实现了变量该特性，何必再多此一举呢？可是细想一下，变量对比Sass变量和Less变量又有它的过人之处。
- 浏览器原生特性，无需经过任何转译可直接运行
- DOM对象一员，极大便利了CSS与JS间的联系
如何使用变量
- 声明：
--变量名 - 读取：
var(--变量名, 默认值) - 类型
- 普通：只能用作
属性值不能用作属性名 - 字符：与字符串拼接
"Hello, "var(--name) - 数值：使用
calc()与数值单位连用var(--width) * 10px
- 普通：只能用作
- 作用域
- 范围：在
当前节点块作用域及其子节点块作用域下有效 - 优先级别：
内联样式 = 外联样式 > ID选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器 > 通配选择器 = 后代选择器 = 兄弟选择器
- 范围：在
场景
其实变量有一个特别好用的场景，那就是结合List集合使用。
实例
条形加载条
一个条形加载条通常由几条线条组成，每条线条对应一个存在不同时延的相同动画，通过时间差运行相同动画，从而产生加载效果。
1 <ul class="strip-loading"> 2 <li v-for="v in 6" :key="v" :style="`--line-index: ${v}`"></li> 3 </ul>
1 .strip-loading { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 width: 200px; 6 height: 200px; 7 li { 8 --time: calc((var(--line-index) - 1) * 200ms); 9 border-radius: 3px; 10 width: 6px; 11 height: 30px; 12 background-color: #f66; 13 animation: beat 1.5s ease-in-out var(--time) infinite; 14 & + li { 15 margin-left: 5px; 16 } 17 } 18 } 19 @keyframes beat { 20 0%, 21 100% { 22 transform: scaleY(1); 23 } 24 50% { 25 transform: scaleY(.5); 26 } 27 }
这就是变量的作用范围所致(在当前节点块作用域及其子节点块作用域下有效)，因此在.strip-loading的块作用域下调用--line-index是无效的。
示例二：改编心型加载条
1 <div class="heart-loading"> 2 <ul style="--line-count: 9"> 3 <li v-for="v in 9" :key="v" :class="`line-${v}`" :style="`--line-index: ${v}`"></li> 4 </ul> 5 </div>
1 .heart-loading { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 width: 200px; 6 height: 200px; 7 ul { 8 display: flex; 9 justify-content: space-between; 10 width: 150px; 11 height: 10px; 12 } 13 li { 14 --Θ: calc(var(--line-index) / var(--line-count) * .5turn); 15 --time: calc((var(--line-index) - 1) * 40ms); 16 border-radius: 5px; 17 width: 10px; 18 height: 10px; 19 background-color: #3c9; 20 filter: hue-rotate(var(--Θ)); 21 animation-duration: 1s; 22 animation-delay: var(--time); 23 animation-iteration-count: infinite; 24 &.line-1, 25 &.line-9 { 26 animation-name: beat-1; 27 } 28 &.line-2, 29 &.line-8 { 30 animation-name: beat-2; 31 } 32 &.line-3, 33 &.line-7 { 34 animation-name: beat-3; 35 } 36 &.line-4, 37 &.line-6 { 38 animation-name: beat-4; 39 } 40 &.line-5 { 41 animation-name: beat-5; 42 } 43 } 44 } 45 @keyframes beat-1 { 46 0%, 47 10%, 48 90%, 49 100% { 50 height: 10px; 51 } 52 45%, 53 55% { 54 height: 30px; 55 transform: translate3d(0, -15px, 0); 56 } 57 } 58 @keyframes beat-2 { 59 0%, 60 10%, 61 90%, 62 100% { 63 height: 10px; 64 } 65 45%, 66 55% { 67 height: 60px; 68 transform: translate3d(0, -30px, 0); 69 } 70 } 71 @keyframes beat-3 { 72 0%, 73 10%, 74 90%, 75 100% { 76 height: 10px; 77 } 78 45%, 79 55% { 80 height: 80px; 81 transform: translate3d(0, -40px, 0); 82 } 83 } 84 @keyframes beat-4 { 85 0%, 86 10%, 87 90%, 88 100% { 89 height: 10px; 90 } 91 45%, 92 55% { 93 height: 90px; 94 transform: translate3d(0, -30px, 0); 95 } 96 } 97 @keyframes beat-5 { 98 0%, 99 10%, 100 90%, 101 100% { 102 height: 10px; 103 } 104 45%, 105 55% { 106 height: 90px; 107 transform: translate3d(0, -20px, 0); 108 } 109 }
哈哈，原来不用一句JS也能做出好看好玩的特效效果，加油吧，骚年！