css变量的使用方式

css 变量是一种特殊的值，可以在 css 中使用，它可以帮助我们更加方便地维护和管理 css 代码。

在使用 css 变量时，需要先在 css 代码中声明变量。声明变量的方式是：

:root {
  --变量名: 变量值;
}

在上面的代码中，:root 表示根元素，即 html 元素。这意味着这个变量在整个文档中都可以使用。

例如，如果我们想要声明一个名为 primary-color 的变量，其值为红色，那么我们可以这样写：

:root {
  --primary-color: red;
}

然后就可以在 css 代码中使用这个变量了。使用变量的方式是：

元素选择器 {
  属性:var(--变量名);
}

例如，如果我们想要将所有段落的文字颜色设置为 primary-color 变量的值，即红色，可以这样写：

p {
  color: var(--primary-color);
}

注意，如果在使用变量时变量没有被声明，或者变量声明了但没有赋值，那么这个变量的值就是 none。

css 变量还可以有默认值，即在声明变量时可以给变量提供一个默认值。如果在使用