css中如何定义及使用变量？

在CSS中，你可以使用CSS自定义属性（也称为“CSS变量”）来定义可重复使用的值。这些变量特别有用，因为它们允许你定义可以在整个文档中多次使用的值，如果需要更改该值，只需在一个地方更新即可。

如何定义CSS变量：

CSS变量通常定义在:root伪类中，以便在整个文档中都可以访问它们。变量名以两个连字符（--）开头，后跟变量名称。

:root {
  --main-color: #0066cc;
  --secondary-color: #0099ff;
  --font-size: 16px;
}

如何使用CSS变量：

使用var()函数来引用和使用CSS变量。var()函数接受两个参数：要使用的变量的名称和一个可选的默认值（如果变量未定义）。

body {
  background-color: var(--main-color);
  color: var(--secondary-color);
  font-size: var(--font-size);
}

h1 {
  color: var(--main-color);
  font-size: calc(var(--font-size) * 2); /* 使用calc()进行计算 */
}

注意几点：

1. 作用域：CSS变量具有“级联”作用域，这意味着它们在定义它们的元素及其子元素中可用。如果在特定元素内重新定义一个变量，那么该新值将仅在该元素及其子元素内有效。
2. 动态性：虽然CSS变量提供了一定程度的灵活性，但它们不是动态的，不能像JavaScript变量那样进行复杂的操作。它们主要用于存储和重用静态值。
3. 兼容性：大多数现代浏览器都支持CSS变量，但在一些较旧的浏览器版本中可能不受支持。在使用CSS变量时，请确保考虑目标受众的浏览器兼容性需求。
4. 默认值：var()函数的第二个参数是可选的，用于指定变量的默认值。如果变量未定义，将使用该默认值。例如：var(--undefined-var, black) 将返回 black。