本文最初发表于thedevspace.io。掌握Web开发所需的一切
CSS函数是赋予CSS编程能力的特殊语句。它们接收一个或多个输入值，返回一个输出值，并将其应用于CSS属性。例如，我们之前讨论过的rgb()函数，它接收三个数值作为输入，返回相应的颜色代码作为输出，然后将该颜色代码赋给color属性。
<code class="css">p {
color: rgb(168, 189, 45);
}</code>
CSS包含许多函数，完整的参考列表可以在这里找到。由于有些函数非常高级，本篇教程无法一一讲解。我们将以后在具体的例子中详细介绍它们。
var()函数
本节重点介绍一个非常重要的函数：var()。理解它的工作方式有助于理解函数的用途。var()函数允许您检索用户定义的变量。
立即学习“前端免费学习笔记（深入）”；
<code class="css">:root {
--primary-color: salmon;
}
p {
color: var(--primary-color);
}</code>
变量在:root部分定义。:root是一个伪选择器，匹配HTML文档的根元素（<html>）。在这个例子中，--primary-color是变量名，salmon是变量值。var()函数接收变量名作为输入，并返回其值作为输出。
var()函数允许您在CSS的不同位置重复使用相同的变量，从而保持设计的一致性。例如，如果您想将skyblue作为主要强调色，您需要在整个CSS文件中多次使用它：
<code class="css">a {
color: skyblue;
}
button {
background-color: skyblue;
}
/* ... */</code>
但是，当您需要修改设计时，就必须在整个文件中查找并修改这些值，这容易出错，尤其是在大型项目中。更好的方法是将这些值定义为:root中的变量，然后使用var()函数访问它们。这样，当您需要更改强调色时，只需修改相应的变量即可：
<code class="css">:root {
--primary-color: skyblue;
}
a {
color: var(--primary-color);
}
button {
background-color: var(--primary-color);
}</code>
var()函数的用途不仅限于颜色，还可以定义字体系列、字体大小、宽度、高度等任何属性值。
<code class="css">:root {
--primary-color: skyblue;
--font-size: 16px;
--font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
p {
border: var(--primary-color) solid 2px;
font-size: var(--font-size);
font-family: var(--font-family);
}</code>
@规则
@规则是CSS中的特殊指令，语法如下：
<code class="css">@<identifier><rule>;
@<identifier> {
<rule>;
<rule>;
/* ... */
}
@<identifier><name> {
<rule>;
<rule>;
/* ... */
}</code>
@规则的用途多种多样，难以概括。例如，@charset规则指定CSS文件的字符编码；@import用于导入外部CSS文件：
<code class="css">@import url("/path/to/external-styles.css");</code>
url()是一个用于加载外部文件的CSS函数，我们稍后会用到它来加载背景图像和其他资源。
@font-face用于指定自定义字体：
<code class="css">@font-face {
font-family: "trickster";
src: url("/path/to/trickster.woff") format("woff");
/* ... */
}</code>
@keyframes用于定义动画的关键帧：
<code class="css">@keyframes changecolor {
from {
color: red;
}
to {
color: blue;
}
}</code>
CSS中还有其他@规则，我们将在后续教程中介绍。目前，您只需要了解其基本语法即可。
进一步阅读
如何创建和自定义CSS动画 什么是CSS选择器 CSS中的盒模型是什么
