CSS 变量（css自定义属性）

CSS 变量（也被称为 CSS 自定义属性）可以让你创建可以在整个文档中重复使用的值。这样可以让你在单一位置定义一次颜色、尺寸或任何其他值，然后在文档中多次使用它。

CSS 变量的定义是以 -- 开头的自定义属性，你可以在 :root 选择器中定义它，这样它就可以在全文档中使用。

:root {
  --main-bg-color: coral;
  --main-text-color: #333;
  --main-font-size: 16px;
}
 
body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
  font-size: var(--main-font-size);
}

在上面的例子中，我们定义了三个变量：--main-bg-color、--main-text-color 和 --main-font-size。然后在 body 选择器中使用这些变量。

CSS 变量的好处不仅仅是简化代码和提高可维护性，它还可以让你在用户设备上实现深色模式或任何其他主题的变化，只需在 :root 中改变变量的值即可。

@media (prefers-color-scheme: dark) {
  :root {
    --main-bg-color: #333;
    --main-text-color: #f8f8f8;
  }
}

在上面的媒体查询中，当用户的设备设置为深色模式时，:root 中的变量会更改为深色调的值，整个页面的颜色就会随之改变，为用户提供更好的阅读体验。