什么是CSS变量，以及在哪里可以使用它们？

CSS变量（官方称为CSS 自定义属性）的行为类似于其他编程语言中的变量。它们允许您定义包含特定值的命名变量，这些值可以在CSS文档中重复使用。根据自定义属性的表示法，CSS变量以两个破折号为前缀（例如--my-color: black）。要访问它们，您可以使用var()函数（例如color: var(--my-color)）。CSS变量在不同元素和组件之间共享样式时非常有用。示例包括但不限于垂直韵律、字体变量和颜色调色板。

它们最常见的用例之一是主题和暗黑模式。CSS变量可用于在整个网站上创建共享的调色板，并轻松切换到不同的调色板。通常通过将类应用于公共祖先（例如<body>元素）来实现此目的。以下示例演示了在:root元素中定义的全局变量和级联，元素从其父元素继承值：

/* 全局变量在:root元素中定义。 */
:root {
  --bg-color: #fff;
  --main-color: #000;
  --secondary-color: #222;
}
/* 元素从其父元素继承变量。 */
body {
  background-color: var(--bg-color);
  color: var(--main-color);
}
small {
  color: var(--secondary-color);
}
/* 元素可以定义自己的值和变量，覆盖继承的值。*/
body.dark {
  --bg-color: #080808;
  --main-color: #fff;
  --secondary-color: #ccc;
}

另一个有用的示例是为某个元素的特定变体定义共享的自定义样式。这允许自定义整个组件树的样式，而无需重复任何样式。下面的示例比前一个示例更好地演示了级联。它还介绍了在不同元素之间共享样式的概念：

.btn {
  --bg-color: #002299;
  --text-color: #fff;
  --highlight-color: #669900;

  background-color: var(--bg-color);
  color: var(--text-color);
}
/* --highlight-color也可用于.btn的子元素 */
.btn .highlight {
  color: var(--highlight-color);
}
/* .btn.danger .highlight将使用.btn-danger中定义的--highlight-color */
.btn-danger {
  --bg-color: #dd4a68;
  --text-color: #000;
  --highlight-color: #990055;
}

最后，记住以下有用的CSS变量使用技巧：

您可以定义回退值，通过向var()函数提供第二个参数（例如var(--text-color, black)，如果未定义--text-color，则默认为black）。
CSS变量区分大小写，所以要注意大小写。它们也可以像其他样式一样内联在HTML中（例如<div style="--text-color: red">）。
您可以嵌套var()调用，使用另一个变量作为回退（例如var(--main-color, var(--other-color))），将它们传递给其他函数（如calc()），甚至将一个变量赋值给另一个变量（例如--text-color: var(--main-color)）。