英文 | https://javascript.plainenglish.io/6-useful-css-functions-every-web-developer-should-know-4be9ad59183f
翻译 | 杨小爱
CSS 是每个 Web 开发人员必备的样式表语言。 它允许我们设置网页样式并使其具有响应性。 此外，借助 flexbox 和 grid 等新的 CSS 功能，我们可以轻松地为我们的网页创建复杂的布局。
CSS与所有其他不同的语言一样，CSS 也有自己可以使用的功能。 这些函数可以放置在您要放置属性值的位置。
在某些情况下，它们可以伴随另一个值声明。 一些 CSS 函数甚至可以嵌套到其他函数中，让您一次完成许多事情。
在本文中，我将与您分享一些作为 Web 开发人员应该知道的有用的 CSS 函数。 现在，让我们开始吧。
1、函数计算
我们可以使用 CSS 中的calc() 函数轻松进行计算（+、-、*、/）以确定属性值。
该函数将计算作为其参数。 所以让我们看一个简单的例子：
div{
width: calc(100vw - 50px);
}
正如您在上面看到的，我们使用函数 calc() 来计算我们想要的确切宽度，而无需更改单位。 所以，这是一个完美的功能，可以在你的 CSS 代码中自动执行这些类型的计算。
2、函数var
如果您使用的是 vanilla CSS，此功能非常有用。 它允许您将 CSS 变量的值赋予属性。 所以这个函数 var() 对于创建 CSS 变量并在代码的不同位置使用它们很有用。
这是一个代码示例：
:root {
--main-bg-color: coral;
--main-padding: 15px;
}
/* using the var function to insert variables as property values */
div{
background-color: var(--main-bg-color);
padding: var(--main-padding);
}
结果，由于 var 函数，该 div 将具有背景色珊瑚色和 15px 的填充。
3、网址功能
函数 url() 用于描述或识别我们项目中文件的位置。 此函数通常与以下属性一起使用：背景图像、列表样式、内容、边框等。
这是一个代码示例：
.element{
background-image: url("pic.gif");
list-style-image: url('../images/pic.jpg');
content: url("pdficon.jpg");
cursor: url(mycursor.cur);
}如您所见，该函数允许我们将文件或媒体资源设置为 CSS 中某些属性的值。
4、rgb() 和 rgba() 函数
函数 rgb() 和 rgba() 用于描述 CSS 中的颜色级别。
这是一个例子：
#div1{
color: rgb(0, 0, 6);
}
#div2{
color: rgba(0, 0, 0, 1);
}
5、 CSS hsl() 函数
函数 hsl() 代表色相、饱和度和亮度。 它允许我们使用这些参数定义颜色级别。
这是一个代码示例：
div{
background: hsl(0, 100%, 50%);
}
6、函数:not()
CSS 中的 :not() 函数用于将样式应用于没有特定类或 ID 的特定元素。
例如，我们可以使用函数 :not() 将样式仅应用于没有名为 .pic 的类的图像。
这是示例：
img:not(.pic){
padding: 0;
opacity: .5;
}
结论
正如您在上面看到的，这是您可以在代码中使用的6个有用的CSS 函数小列表。 还有很多其他功能我们没有介绍，因为列表会很长，但我可能会在以后的文章中介绍一个庞大的列表。
最后，感谢您的阅读。
