阅读 101

Let's learn CSS 学习笔记 - Function

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

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


英文原文链接

CSS Function

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

什么是函数?

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

image.png

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 指向的资源,则任何内容都将通过该功能返回。

文章分类
前端
文章标签