# 变量

CSS变量又名CSS自定义属性，指可在整个文档中重复使用的值。它由自定义属性--var和函数var()组成，var()用于引用自定义属性。谈到为何会在CSS中使用变量，以下上个示例，估计一看就会明白。

/* 不使用变量 */
.title {
    background-color: red;
}
.desc {
    background-color: red;
}

/* 使用变量 */
:root {
    --bg-color: red;
}
.title {
    background-color: var(--bg-color);
}
.desc {
    background-color: var(--bg-color);
}

• 看完可能会觉得使用变量的代码会多了一点，但是有无想到突然某天万恶的策划小哥哥和设计小姐姐说要做一个换肤功能。按照平时思路，估计有些同学就会按照默认颜色主题增加一份对照的新颜色主题样式文件。这样每次增加需求都同时维护几套颜色主题多麻烦啊。
• 此时变量就派上用场了，提前跟设计小姐姐规范好各种需变换的颜色并使用变量定义，通过JS批量操作这些定义好的变量即可。这也是变换颜色主题的一种解决方案，好处在于只需维护一套CSS代码，第13章实战大操作-切换控件会使用纯CSS实现暗黑模式换肤。

["red", "blue", "green"].forEach(v => {
    const btn = document.getElementById(`${v}-theme-btn`);
    btn.addEventListener("click", () => document.body.style.setProperty("--bg-color", v));
});

CSS使用变量有如下好处。

• 减少样式代码的重复性
• 增加样式代码的扩展性
• 提高样式代码的灵活性
• 增多一种CSS与JS的通讯方式
• 不用深层遍历DOM改变某个样式

可能有些同学会问，sass和less早就实现了变量该特性，何必再多此一举呢？可是细想一下，变量对比Sass变量和Less变量又有它的过人之处。

• 浏览器原生特性，无需经过任何转译可直接运行
• DOM对象一员，极大便利了CSS与JS间的联系

# 认识

本来打算用一半篇幅讲述变量的规范和用法，但是网上一搜一大把就感觉没必要了，贴上阮一峰老师发表的教程《CSS变量教程》。同时笔者也对变量的细节作一个整理，方便记忆。

• 声明：--变量名
• 读取：var(--变量名, 默认值)
• 类型
  • 普通：只能用作属性值不能用作属性名
  • 字符：与字符串拼接 "Hello, "var(--name)
  • 数值：使用calc()与数值单位连用 var(--width) * 10px
• 作用域
  • 范围：在当前节点块作用域及其子节点块作用域下有效
  • 优先级别：内联样式 = 外联样式 > ID选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 元素选择器 = 伪元素选择器 > 通配选择器 = 后代选择器 = 兄弟选择器

接下来使用几个特别的场景展示变量的魅力。还是那句话，一样东西有使用的场景，那自然就会有它的价值，那么用的人也会越来越多。

# 场景

其实变量有一个特别好用的场景，那就是结合List集合使用。若不明白这是什么，请继续往下看。

条形加载条

一个条形加载条通常由几条线条组成，每条线条对应一个存在不同时延的相同动画，通过时间差运行相同的动画，从而产生加载效果。估计大部分的同学可能会把CSS代码编写成以下这样。

<ul class="strip-loading">
    <li v-for="v in 6" :key="v"></li>
</ul>