CSS3变量怎么定义和使用

在CSS3中，你可以使用自定义属性（也称为CSS变量）来存储值，并在样式表中重复使用这些值。这使得维护和更新样式变得更加容易。

定义CSS变量

CSS变量通常在:root伪类中定义，这样它们就可以在整个文档中使用。你也可以在其他选择器中定义变量，以便它们只在特定的上下文中可用。

:root {
  --main-color: #ff6347;
  --secondary-color: #4682b4;
  --font-family: 'Arial', sans-serif;
}

或者在一个特定的元素中定义：

.my-component {
  --main-color: #ff6347;
  --secondary-color: #4682b4;
}

使用CSS变量

使用var()函数来引用定义的CSS变量。

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

如果你在一个特定的元素中使用变量，那么这个变量的作用域将限制在这个元素及其子元素。

.my-component {
  background-color: var(--main-color);
}

.my-component p {
  color: var(--secondary-color);
}

变量的继承

CSS变量默认是不继承的，但是你可以通过使用inherit关键字来使变量继承父元素的值。

:root {
  --main-color: #ff6347;
}

.element {
  --main-color: inherit; /* 这将使得.element及其子元素继承:root中的--main-color值 */
}

变量的计算

CSS变量可以用于计算属性值。

:root {
  --base-font-size: 16px;
  --scale-factor: 1.2;
}

.element {
  font-size: calc(var(--base-font-size) * var(--scale-factor));
}

变量的默认值

你可以为CSS变量提供一个默认值，以防变量没有被定义。

.element {
  background-color: var(--main-color, #ff6347); /* 如果--main-color未定义，则使用#ff6347作为默认值 */
}

使用CSS变量可以让你的样式表更加灵活和易于维护。通过在一个地方定义颜色、字体大小等值，你可以轻松地更改整个网站的设计，只需更新变量的值即可。