一直以来大家都不把CSS当作一门编程语言，是因为他不像其他和程序语言一样具有程序语言的特性，比如变量、函数、逻辑运算等。但随着CSS不断的变革，CSS也越来越像一门程序语言，比如CSS也有变量、逻辑操作和函数等特性。虽然说这些特性不像其他程序语言那么强大，但他实实在在的在变化，而且有了一定的进步。今天主要和大家来聊CSS中的函数。

简介

CSS中的函数不像其他功能模块有自己独立的规范，但是他真的存在于CSS中，而且大家在平时编写CSS的时候已经用到过了CSS函数。那么，CSS中的函数是什么呢？为了解开这个迷，我们先从其他的程序语言开始，比如我们前端最熟悉不过的JavaScript语言。

在一些编程语言中，函数可以用来执行特定任务的，而这些执行特定任务的代码都放置在一个花括号{}块中。就拿JavaScript来说吧，我们有一个helloWorld()函数：

function helloWorld() {
    alert('Hello, CSS and JavaScript')
}

helloWorld()

执行helloWorld()函数后会弹出一个对话框：

前端开发者都知道，JavaScript中还可以给函数传递一些参数，这些参数是一些数据或文本，并且可以在函数的逻辑中输出。比如上面的函数，我们给其传递一个参数name：

function helloWorld (name) {
    alert(`Hi, ${name}, welcome!`)
}

helloWorld('大漠')

这个时候大漠就是传递给函数helloWorld的name：

在JavaScript中编写函数，主要是帮助我们做一些重复性的工作。

在CSS中，也有函数，但他的函数构建和JavaScript这样的编程语言有所不同。CSS的函数同样会返回一个值，但这些值主要是赋值给CSS属性的，最终将是CSS属性的值。换句话说，函数返回的结果赋值给不同的CSS属性时，所起的作用也将不同。就拿CSS中最早的函数之一calc()来说吧，如果赋值给width那么是用来指定宽度的值，如果给border-width，那么是用来指定边框粗细的。

另外，CSS中的函数相对于程序语言中的函数来说要简单的多，因为CSS函数中不会带有复杂逻辑处理，最多也就是一个表达式，比如calc(10vw + 10px)。这样一来，CSS中的函数要简单地多。

虽然CSS的函数简单，但根据不同的功能特性，其类型也多。接下来，我们就来和大家聊聊CSS中常见的一些函数。

CSS函数的基本特征

CSS的函数有着其自身的特征，简单地说，CSS中带有小括()的一般会被认为是CSS的函数。在CSS中使用()的地方主要有CSS选择器和CSS属性值。比如：

虽然CSS不能创建自己的函数（自定义函数），也不能具备复杂的逻辑能力，但CSS函数也具备一些简单的逻辑处理能力。比如上图中的:not()选择器（也称为函数），就可以过滤掉.active的类名。

另外，CSS函数不像其他程序语言的函数，它的输出本质上是可视的。这个输出主要用于控制CSS属性的值，从而影响元素的样式效果。例如：

a:hover {
    filter: drop-shadow(.25rem 0 .75em #f36)
}

上面示例使用的是CSS滤镜中的阴影（drop-shadow()），当鼠标悬浮到元素上是会有一个发光效果。

如果要用一句话来描述CSS函数的话，那么可以是：

CSS函数主要服务于CSS的选择器和属性，它有着一个最基本的特性，那就是带有一个小括号()标记符，在括号内可以放置值（参数）。

CSS函数类型

时至今日，W3C规范中并没有一份独立的规范来描述CSS函数，但这些函数的确存在，并且散落在不同的功能模块中。

我根据功能类型，对CSS函数做了一个简单的类型划分，如下图所示：

上图中的函数大部分都有档可查，W3C规范对其做出详细的描述。其中有很多是我们熟悉的，比如伪类选择器函数、渐变函数、颜色函数、滤镜函数等，当然也有我们不太熟悉（甚至从未见过的）函数，比如数学函数和其他函数所列的。

接下来，我们会简单的介绍这些函数，以及其出处，但不会详细的介绍每个函数的作用和使用。有关于它们更详细的描述，建议查阅规范中对应的描述。

常见的CSS函数

我们从最常见的几个函数开始。这几个函数是特意上图中提出来的，因为在还没有提CSS函数概念的时候，他们就出现在我们的代码中，而且使用频率也较高。这几个函数就是url()、attr()、calc()、:lang()和:dir()。

url()

url()函数来自CSS Images Module

我想最早接触到url()应该是在给元素添加背景图片的时候，换句话说，就是通过url()函数一加载图像资源：

.element {
    background-image: url(wavy.png);
}

但在今天的CSS中，url()不再局限于background-image属性中，还可以用于：

background-image: url("https://mdn.mozillademos.org/files/16761/star.gif");
list-style-image: url('../images/bullet.jpg');
content: url("pdficon.jpg");
cursor: url(mycursor.cur);
border-image-source: url(/media/diamonds.png);
src: url('fantasticfont.woff');
offset-path: url(#path);
mask-image: url("masks.svg#mask1");
@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

简单地说，在CSS中可以使用url()函数来引用相应的资源，有点类似于HTML中的src，href属性。

attr()

attr()函数来自CSS Values and Units Module。

原则上说，attr()能运用于所有的CSS属性，但目前仅能服务于CSS的伪元素::before和::after的content属性。该函数可以用来获取到HTML元素的属性的值（比如data-*属性）。最为常见的示例就是构建Tooltips：

[tooltip]::after {
    content: attr(tooltip); 
}

在一些场景之中，我们可以让Web的体验更佳，比如图片加载失败，让UI上更美：

另外有一个场景，attr()函数非常有用，即“在打印页面的时候，希望链接地址能打印出来”。实现该效果我们就可以借助attr()函数来完成：

@media print {
    a[href]:after {
        content: " (" attr(href) ")";
    }
}

另外还可以将相对链接，锚点做一些处理：

@media print {
    a[href^="http"]:not([href*="mywebsite.com"]):after {
        content: " (" attr(href) ")";
    }
}

你可以尝试打开上例，然后按下command + p快捷键(MacOS系统)，你会看到非打印状态和打印状态下的不同：

calc()

calc()函数来自CSS Values and Units Module。

在calc()到来之前，CSS不能像其他程序语言去做一些计算操作。那么自calc()来到我们的身边之后，他具备一些简单的数学四则运算，即可以在calc()函数中进行加（+）、减（-）、乘（*）和除（/）的运算，而且也可以添加小括号()来控制其运算的顺序。

有了calc()之后，在一些动态计算的场景就变得容易地多。比如对安全区域的计算，calc()让事情变得简单地多：

@supports (padding-top: constant(safe-area-inset-top)) {
    .main {
        padding-top: calc(var(--safe-area-inset-top) + 88px);
    }
    .detail {
        background-position: 0 calc(var(--safe-area-inset-top) + 395px), 0 0;
    }
}

@supports (padding-top: env(safe-area-inset-top)) {
    .main {
        padding-top: calc(var(--safe-area-inset-top) + 88px);
    }
    .detail {
        background-position: 0 calc(var(--safe-area-inset-top) + 395px), 0 0;
    }
}

时至今日，calc()的使用场景很多，比如我们构建响应式设计时，对font-size大小加把锁的时候，calc()就起到在关键性的作用：

@media (min-width: 320px) and (max-width: 959px) { 
    h1 { 
        font-size: calc( 1.5rem + 16 * (100vw - 320px) / (960 - 320) ); 
        /* 对于负的斜率，需要对断点求倒数 */ 
        line-height: calc( 1.2em + 3.2 * (100vw - 960px) / (320 - 960) ); 
    } 
}

特别是随着CSS自定义属性的出现，calc()的作用就更大了，给开发者带来的便利性就更强了，比如在《图解CSS: CSS 颜色》一文中提到的，可以使用calc()和CSS自定义属性，灵活的实现颜色反色效果：

:root {
    --red: 28;
    --green: 150;
    --blue: 130;

    --accessible-color: calc(
        (
        (
            (
            (var(--red) * 299) +
            (var(--green) * 587) +
            (var(--blue) * 114)
            ) / 1000
        ) - 128
        ) * -1000
    );
}

:lang()

:lang()来自于Selectors Level 4。

如果你平时的业务有涉及到国际业务，那么对于语言的使用应该有较高的要求。

作为Web开发者，都知道，可以在HTML的元素中通过lang属性来指定文档语言的类型，比如：

<html lang="en"></html>
<html lang="zh-CN"></html>

也可以在除<html>元素上的其他元素上显式指定lang属性：

<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>

在CSS中，我们可以通过:lang()函数（常称为伪类选择器），根据不同语言类型，设置不同的样式效果：

:lang(en) > q { 
    quotes: '\201C' '\201D' '\2018' '\2019'; 
}

:lang(fr) > q { 
    quotes: '« ' ' »'; 
}

:lang(de) > q { 
    quotes: '»' '«' '\2039' '\203A'; 
}

:lang(ko) > q {
    quotes: "\300C" "\300D" "\300E" "\300F" "\300C" "\300D" "\300E" "\300F";
}

:dir()

:dir()来自Selectors Level 4。

从《Web中向左向右》一文中我们可以得知，不同的语言类型有关不同的布局方式，特别是方向性有明确的要求，这样做主要是便于用户的阅读。比如我们熟悉的英文，它的阅读方式都是从左往右（ltr）；对于阿拉伯语系，它的阅读方式都是从右往左（rtl）。

在HTML中，我们可以显式地使用dir属性指定其阅读方式（ltr或rtl）。

<div dir="rtl">
    <span>test1</span>
    <div dir="ltr">test2
        <div dir="auto">עִבְרִית</div>
    </div>
</div>

本例中 :dir(rtl) 会匹配最外层的div，内容为test1的span，和有希伯来字符的div。:dir(ltr) 会匹配到内容为test2的div。

同样的，在CSS中，我们可以使用:dir()函数来为不同的阅读方式指定不同的样式。

:dir(rtl) { 
    color: red; 
}

:dir(ltr) { 
    color: blue; 
}

请使用Firefox打开上面的Demo，你将看到:dir()函数对应的样式效果：

从url()、calc()、:lang()和:dir()四个基础函数中可以得知，CSS函数可以返回一定的值，返回的值主要服务于CSS的选择器和CSS属性。就目前为止，伪类选择器函数主要用于CSS的选择器，用来过滤元素；除伪类选择器之外的其他函数主要用于CSS的属性，作为属性的值。不管哪类函数，都可以在()传递一定的参数值（参数可以是单一的，也可以是多个的，还可以是表达式）。

自定义属性函数

自定义属性函数又称为CSS的变量函数，来自于CSS Custom Properties for Cascading Variables Module Level 1。

熟悉CSS的前端开发者都知道，早期的CSS不像其他程序语言有变量的概念。自CSS Custom Properties for Cascading Variables Module Level 1出现，在CSS中也有了变量的概念。

在现代CSS中，可以使用双破折线--在选择器中声明自定义属性：

:root {
    --color: #f36;
}

selector {
    --color: #f36;
}

正如上面示例中所示--color