6 个可以在 CSS 代码中使用的CSS 函数

Posted 2022-09-28

英文 | 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 函数小列表。 还有很多其他功能我们没有介绍，因为列表会很长，但我可能会在以后的文章中介绍一个庞大的列表。

最后，感谢您的阅读。