原文:CSS Variables Definition – What are CSS Vars and How to Use Them,作者:Jessica Wilkins

CSS 变量是自定义的变量,你可以在整个样式表中创建和重复使用它们。

在这篇文章中,我将告诉你如何在 :root 伪选择器上创建 CSS 变量,并告诉你如何使用 var() 函数访问它们。

如何创建一个 CSS 自定义变量

下面是创建一个自定义 CSS 变量的基本语法:

--css-variable-name: css property value;

最好的做法是在样式表的顶部定义所有的变量。对于大型项目来说,通常为你的自定义颜色变量创建一个单独的文件,这样你可以在其他样式表中重复使用它们。

如果你想访问该变量,那么你可以使用 var() 函数。下面是基本的语法:

css property: var(--css-variable-name);

在这个例子中,我想创建自定义的背景和文本颜色变量,以便在整个样式表中重复使用。我将把这些变量命名为 --main-bg-color--main-text-color

  --main-bg-color: #000080;
  --main-text-color: #fff;

我将把这些变量放在 :root 伪选择器内,它代表我的 HTML 文档中的根元素。

:root {
  --main-bg-color: #000080;
  --main-text-color: #fff;
}

在我的 body 选择器中,我将使用 var() 函数来引用这些变量。

body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
}

下面是一个示例:

如果我想在页面上添加更多的内容,那么我可以在整个样式表的其余部分重复使用这些变量,避免不必要的重复,比如这样:

.example-class-1 {
  background-color: #000080;
  display: flex;
  flex-direction: column;
}

.example-class-2 {
  font-size: 2.1rem;
  color: #fff;
}

.example-class-3 {
  background-color: #000080;
  color: #fff;
  border: 2px solid black;
}

在这第二个例子中,我在页面上有 6 个红色、绿色和蓝色的盒子。我首先为这些方框创建了 HTML 标记。

<div class="box-container">
  <div class="box red-box">Box 1</div>
  <div class="box green-box">Box 2</div>
  <div class="box blue-box">Box 3</div>
</div>
<div class="box-container">
  <div class="box blue-box">Box 4</div>
  <div class="box green-box">Box 5</div>
  <div class="box red-box">Box 6</div>
</div>

然后我创建了一组自定义的红、绿、蓝变量。

:root {
  --maroon-red: #800000;
  --dark-green: #013220;
  --navy-blue: #000080;
  --white: #fff;
}

最后,我使用 var() 函数将这些变量应用于我的盒子。

.red-box {
  background-color: var(--maroon-red);
}

.green-box {
  background-color: var(--dark-green);
}

.blue-box {
  background-color: var(--navy-blue);
}

以下是完整代码和最终结果:

如何命名 CSS 变量

在命名变量时,你希望选择简短的描述性名称,以便其他开发人员知道这些变量是什么。

这将是一个错误变量名的示例:

 background-color:var(--color);

--color 是什么?

它是某种红色的阴影吗?绿色?蓝色?还是别的什么?

它是主背景色还是主文本色?

你不希望其他开发者不得不回头去看 CSS 的定义来弄清楚它应该是什么。

另一个例子是,如果你为不同色调的颜色创建自定义的 CSS 变量,那么你可以选择这样命名它们:

:root {
  --maroon-red: #800000;
  --light-red: #ff0000;
  --crimson-red: #e32636;
}

每个开发者都会有自己的命名变量的方式。要记住的是为你的变量提供描述性的名字。

总结

CSS 变量是自定义的变量,你可以在你的样式表中创建和重用它们。

下面是定义一个自定义 CSS 变量的基本语法:

--css-variable-name: css property value;

如果你想访问该变量,那么你将使用 var() 函数。下面是基本的语法:

css property: var(--css-variable-name);

每个开发者都会有自己命名变量的方式,但最好的做法是创建简短的描述性名称。

我希望你喜欢这篇文章,祝你在 CSS 之旅中好运。