CSS功能指南

CSS 函数指南：掌控样式的强大工具

如同其他编程语言一样，CSS 也拥有函数。这些函数可以插入到值的位置，或在某些情况下，伴随另一个值声明使用。一些 CSS 函数甚至允许你嵌套其他函数！

更多

在编程中，函数是执行特定任务的一段命名代码。例如，JavaScript 中一个名为 sayWoof() 的函数：

function sayWoof() {
  console.log("Woof!");
}

我们可以在定义所需行为后，在代码的后面使用此函数。在这个例子中，任何时候你在你的网站或 Web 应用的 JavaScript 中键入 sayWoof()，它都会将“Woof!”打印到浏览器的控制台。

函数也可以使用参数，这些参数是用于数字或文本片段的槽位，你可以将它们输入函数的逻辑中以修改它们。在 JavaScript 中，它是这样工作的：

function countDogs(amount) {
  console.log("There are "   amount   " dogs!");
}

这里，我们有一个名为 countDogs() 的函数，它有一个名为 amount 的参数。当为 amount 提供一个数字时，它将获取该数字并将其添加到预先指定的句子中。这使我们能够创建告诉我们我们统计了多少条狗的句子。

countDogs(3); // There are 3 dogs!
countDogs(276); // There are 276 dogs!
countDogs("many"); // There are many dogs!

一些编程语言自带内置函数，以帮助你避免为每个新项目重新发明轮子。通常，这些函数旨在帮助更轻松地使用该语言的主要优势和功能。

例如，库。库是由精心挑选的函数集合组成的代码集合，旨在帮助加快和简化开发——例如 FitVids.js，用于创建灵活的视频元素。

### CSS 函数的基础知识

与其他编程语言不同，我们不能在 CSS 中创建我们自己的函数。这种逻辑保留给 CSS 选择器，它允许你创建强大的条件样式规则。

与其他编程语言不同——其他编程语言中函数的输出通常会隐式地影响后续的逻辑——CSS 函数的输出本质上是可视的。此输出用于控制内容的布局和演示。例如：

.has-orange-glow {
  filter: drop-shadow(0.25rem 0 0.75rem #ef9035);
}

CSS filter 函数 drop-shadow() 使用我们提供的参数在应用它的任何内容上创建一个橙色的外发光效果。

在下面的演示中，我有一个名为 toggleOrangeGlow 的 JavaScript 函数，它在 CSS-Tricks 徽标上切换 .has-orange-glow 类的应用。将其与 CSS 过渡结合使用，我们可以创建一个很酷的发光效果：

你可能熟悉一些 CSS 函数，但该语言有一个令人惊讶的广泛列表！

与 Web 上的任何其他技术一样，不同的 CSS 函数具有不同的浏览器支持级别。确保你进行研究和测试以确保你的体验对每个人都有效，并使用诸如 @supports 之类的东西来提供高质量的替代体验。

常用的 CSS 函数

url()

.el {
  background: url(/images/image.jpg);
}

使用 url()

url() 允许你链接到其他资源以加载它们。这可以包括图像、字体，甚至是其他样式表。出于性能原因，最好限制你通过 url() 加载的内容，因为每个声明都是一个额外的 HTTP 请求。

#### attr()

/* <div data-example="foo"> */
div {
  content: attr(data-example);
}
<p><details><summary>
使用 <code>attr()</code>      </summary><p>此函数允许我们进入 HTML，获取属性的内容，并将其提供给 CSS <code>content</code> 属性。你通常会看到 <code>attr()</code> 用于打印样式表中，它用于在链接文本后显示链接的 URL。此函数的另一个很好的应用是，如果图像加载失败，则使用它来显示图像的替代说明。</p></details></p>
<p>#### <code>calc()</code></p>
<pre class="brush:php;toolbar:false">.el {
  width: calc(100vw - 80px);
}

使用 calc()

如果你有一个函数应该花一些时间来试验，那就是 calc()。我们有一份完整的关于 calc() 的指南。

此函数接受两个参数，并根据你提供的运算符 ( , -, *, /) 计算结果，前提是这些参数是有或没有伴随单位的数字。

与 Sass 等 CSS 预处理器不同，calc() 可以混合单位，这意味着你可以做一些事情，例如从 100% 中减去 6rem。calc() 也是动态更新的，因此如果 100% 代表宽度，那么如果该宽度发生变化，它仍然有效。calc() 也可以接受 CSS 自定义属性作为参数，这为你提供了令人难以置信的灵活性。

#### lang()

p:lang(en) {
  quotes: "\201C" "\201D" "\2018" "\2019" "\201C" "\201D" "\2018" "\2019";
}

使用 lang()

在你的 HTML 中包含 lang 属性是一件非常重要的事情。当它出现在你的 HTML 中时，你可以使用 lang() 函数来定位属性值的出现，并根据它有条件地应用样式。

此选择器的一个常见用途是设置特定于语言的引号，这对于国际化等非常有用。

聪明的设计师和开发人员也可能将其用作样式翻译版本的网站的钩子，其中文化和/或语言方面的考虑意味着对负空间等事物的看法有所不同。

#### :not()

h3:not(:first-child) {
  margin-top: 0;
}

使用 not()

此伪类选择器将选择任何不是你指定的内容。例如，你可以使用 body:not(img) 来定位任何不是图像的内容。虽然此示例非常强大，但将 :not() 作用域限定为更集中的选择器（例如 BEM 的块类）可以为你提供很大的多功能性。

目前，:not() 只支持一个选择器作为其参数，但是正在开发对多个逗号分隔的参数的支持（例如 div:not(.this, .that)）！

等等，更多函数介绍请参考原文。 由于篇幅限制，此处省略了原文中剩余的大量CSS函数介绍。 请参考原文获取完整信息。