Let’s learn CSS 学习笔记 – Function

这是我参与更文挑战的第 16 天，活动详情查看： 更文挑战

本文仅对内容进行整理，不保证内容为最新。内容将不断更新，敬请期待。

英文原文链接

CSS Function

与许多编程语言一样（话说 CSS 是编程语言吗？），CSS 内置了一组函数。在这篇文章中，你会了解到函数的功能和使用方法。

什么是函数？

函数是一个可完成特定任务的自成一体的代码。函数允许指定一个或一组参数，在调用时传递到函数中。这组参数被称为传递参数。

CSS 函数大多是纯函数。这意味着，如果你调用时传入相同的参数，将会得到同样的结果。你无需关心函数内部发生了什么。函数值通常会随着 CSS 值的变化而重新计算，比如说 currentColor。

暂时你无法自行编写 CSS 函数（Houdini 先不考虑）。

CSS 函数在某些情况下可以相互嵌套使用，从而获得更大的灵活性。

功能选择器

.post :is(h1, h2, h3) {
    line-height: 1.2;
}
复制代码

传递到这些函数的参数是 CSS 选择器。将会对选择器进行评估。如果与元素匹配，则使用下面的 CSS 规则

自定义属性和 var()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}
复制代码

自定义属性是一个变量，允许您在 CSS 代码中标记值。自定义属性也受级联影响，这意味着它们可以上下文操作或重新定义。自定义属性必须以两个破折号为前缀， 并且对大小写敏感。

.my-element {
    background: var(--base-color, hotpink);
}
复制代码

var 支持 fallback。当第一个参数值无效时，会回退到第二个参数代表的默认值。
上面的例子，对背景颜色进行 fallback

返回值的功能

该函数只承担返回值的操作。例如 attr() 和 url()。你传入一个或多个参数，并在 CSS 声明的右侧使用。

a::after {
  content: attr('href');
}
复制代码

此处的功能是将元素属性的内容作为伪元素设置。如果元素属性的值发生更改，也会自动反映在属性中。

.my-element {
    background-image: url('/path/to/image.jpg');
}
复制代码

该函数需要一个字符串 URL，用于加载图像、字体和内容。如果无法传递有效 URL 或找不到 URL 指向的资源，则任何内容都将通过该功能返回。