CSS的var()函数与自定义属性（也称为CSS变量）是CSS中一个非常强大的特性，它们允许你在整个样式表中重用值，使得维护和更新样式变得更加容易。

自定义属性（CSS变量）

自定义属性（Custom Properties）允许你定义一组可以在整个文档中复用的值。它们以--开头，后面跟着自定义的属性名和一个值。例如：

:root {
  --main-bg-color: coral;
  --main-text-color: white;
}
  • 1.
  • 2.
  • 3.
  • 4.

在这个例子中，:root伪类被用来在全局范围内设置自定义属性。这意味着这些属性可以在整个文档中被访问和使用。

var()函数

var()函数用于获取自定义属性的值。它接受一个参数，即你想要获取的自定义属性的名称（不包括--前缀）。如果属性不存在，你可以提供一个回退值作为第二个参数。例如：

body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color, black); /* 如果--main-text-color未定义，则使用black作为回退值 */
}
  • 1.
  • 2.
  • 3.
  • 4.

在这个例子中，body元素的背景色和文本颜色分别被设置为之前定义的--main-bg-color和--main-text-color的值。如果--main-text-color没有被定义，文本颜色将回退到black。

优点
  • 可维护性：通过在整个文档中使用自定义属性，你可以轻松地更新和维护颜色、字体大小等样式值，而无需在多个地方进行更改。
  • 可重用性：自定义属性可以在整个文档中被重用，这有助于减少代码重复。
  • 主题化：通过更改一组自定义属性的值，你可以轻松地更改整个网站或应用的主题。
注意事项
  • 自定义属性名是大小写敏感的。
  • 自定义属性可以包含任何有效的CSS值，包括其他自定义属性的引用。
  • 自定义属性可以在CSS的任何地方使用，包括媒体查询和动画中。
  • 并非所有浏览器都支持CSS自定义属性，但现代浏览器（如Chrome、Firefox、Safari和Edge）都提供了良好的支持。

总的来说，CSS的var()函数与自定义属性是CSS中一个非常有用的特性，它们可以显著提高样式表的可维护性和可重用性。