原文: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 之旅中好运。