CSS var() 语法
在 CSS 中，var() 函数用于插入 CSS 变量 的值。我们可以先在 CSS 中定义可复用的值，然后在需要时通过 var() 函数使用这些值。
CSS 变量可以用于保存颜色、尺寸、字符串等值，从而提高代码的可维护性和灵活性。
语法：
var(--name, value)说明：
var() 函数接受以下 2 个参数：
--name（必选）：这是一个自定义的 CSS 变量，该变量必须以 “--” 开头。其中，CSS 变量通常在 :root 或其他选择器中定义。value（可选）：是一个备选值（也叫回退值）。当 --name 不存在时，就会使用 value 作为该属性的值。如果引用的 CSS 变量未定义并且未提供回退值，那么 CSS 属性将使用它的默认值。
对于 var() 函数，小伙伴们要清楚以下几点：
- 我们可以通过在 :root {} 选择器中定义全局 CSS 变量，也可以在特定元素或选择器中定义局部 CSS 变量。
- CSS 变量的值可以是任何有效的 CSS 值，包括长度（如 10px、2rem）、颜色（如 #FFFFFF、rgb(0, 0, 0)）、字符串等。
- var() 函数可以结合其他 CSS 函数（如 calc()、clamp() 等）一起使用。
提示: var 是 “variable（变量）” 的缩写。
CSS var() 摘要
| 属于 | CSS 函数 |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS var() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS var() 函数是如何使用的。
示例 1：var() 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
:root {
--primary-color: lightskyblue;
}
.box {
width: 100px;
height: 100px;
background-color: var(--primary-color);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>页面效果如下图所示。
分析：
我们在 :root{} 中定义了一个名为 “--primary-color” 的全局 CSS 变量。定义了 CSS 变量之后，就可以通过 var() 函数来使用该变量。大家要特别注意，CSS 变量必须借助 var() 函数来使用，而不能直接使用。
/* 正确 */
background-color: var(--primary-color);
/* 错误 */
background-color: --primary-color;background-color: var(--primary-color); 表示借助 var() 函数来使用 --primary-color 这个变量。因此最终 background-color 的值为 lightskyblue。
示例 2：var() 使用回退值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: var(--main-color, hotpink);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，div 元素的 background-color 属性会试图引用 --main-color 变量。但由于该变量未定义，因此 var() 函数会使用回退值 hotpink。最终，background-color 的值为 hotpink。
回退值在变量未定义或不可用时非常有用，它可以确保样式不会失效。
示例 3：var() 结合 calc()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
:root {
--base-size: 20px;
}
div {
width: calc(var(--base-size) * 5);
height: 100px;
background-color: lightskyblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
width: calc(var(--base-size) * 5);对于上面这句代码来说，由于 --base-size 的值为 20px，此时 width: calc(var(--base-size) * 5); 等价于 width: calc(20px * 5);，因此 width 最终的值为 100px。
示例 4：var() 实现主题切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
:root {
--bg-color: beige;
--text-color: #333;
}
.box {
width: 200px;
height: 100px;
background-color: var(--bg-color);
color: var(--text-color);
text-align: center;
line-height: 100px;
}
.dark-theme {
--bg-color: #333;
--text-color: #fff;
}
</style>
</head>
<body>
<div class="box">绿叶网（亮色主题）</div>
<div class="box dark-theme">绿叶网（暗色主题）</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们首先在 :root {} 中定义了 2 个变量：--bg-color 和 --text-color，然后在 .dark-theme 类中重新定义了这些变量的值。
对于 box 元素的背景色和文本颜色来说，它们可以根据是否使用了 dark-theme 类来动态切换。
提示: 绿叶网的主题切换效果，就是使用 CSS 变量的方式来实现的。
