如何声明一个变量并在 css 中使用它

在 CSS 中，我们可以使用变量来存储一些值和属性，这样就可以让我们的代码更加清晰易懂，并且可以方便地进行维护和修改。下面就来介绍如何在 CSS 中声明一个变量并使用它。

声明变量

在 CSS 中，声明变量需要使用 -- 前缀，变量名可以是任意的，但是建议使用小写字母和 - 连接的方式来命名。变量的值可以是任意的 CSS 属性值，例如颜色、字号、长度等。

:root {
  --main-color: #ff0000;
  --font-size: 16px;
}

在上面的代码中，我们声明了两个变量：--main-color 和 --font-size。--main-color 的值为红色，--font-size 的值为 16 像素。

需要注意的是，为了让所有的样式都能够使用这些变量，我们需要将它们声明在 :root 伪类中。

使用变量

在 CSS 中使用变量需要使用 var() 函数，函数的参数就是变量名。例如，如果我们要使用上面声明的 --main-color 变量作为文字颜色，代码如下：

h1 {
  color: var(--main-color);
}

在上面的代码中，我们使用了 var(--main-color) 函数作为文字颜色，这样文字的颜色就是红色。

类似的，如果我们想要在一个元素的 font-size 属性中使用 --font-size 变量，代码如下：

p {
  font-size: var(--font-size);
}

在上面的代码中，我们使用了 var(--font-size) 函数作为字体大小，这样字体大小就是 16 像素。

总结

在 CSS 中使用变量可以让我们的代码更加清晰易懂，并且可以方便地进行维护和修改。要声明变量，需要使用 -- 前缀和 :root 伪类，变量的值可以是任意的 CSS 属性值；要使用变量，需要使用 var() 函数，函数的参数就是变量名。