5 个有用的 CSS 函数

UncleJiwa
245 阅读3分钟

介绍

CSS 附带了很多函数，它可以完成很多你认为需要 JavaScript 实现的功能。CSS 每年都会新增一些函数，使得我们的开发变得更加轻松，并且更少的依赖 JavaScript 去实现如动画等功能。CSS 函数是 CSS 最强大的特性之一，本文中，我将介绍我认为有用的几个函数。尽情享受吧！

attr()

attr() 函数用于获取选定元素的属性值。它接收 3 个参数，属性名，单位和默认值。一个使用示例是纯 CSS 实现 tooltip。

<p data-text="the attr function" data-tooltip="Hi from attr!" class="attr">
  This text is combined with
</p>

CSS

p::after {
  content: ' ' attr(data-text);
}

p.attr:hover::after {
  content: ' ' attr(data-tooltip);
  background-color: orange;
  color: white;
}

和你预期的一样，页面上展示的内容是一段组合文本：包含了 attr() 函数拿到的值。如果你把鼠标悬浮在 p 标签上，文本会发生改变。

calc()

calc() 函数使我们能够动态计算 CSS 的值而不是写死成固定的值。通常用于计算元素的大小和位置。它支持加减乘除运算。

值得注意的点是 +，- 运算符需要运算符两边有空格，否则不会生效。对于 *，/ 则没有这个限制，但出于一致性还是建议加上空格。

此外，calc() 支持不同单位的 CSS 计算，意味着我们可以将百分比和像素相减。

让我们看一个居中元素的例子。

<p class="calc">Centered with calc</p>

CSS

p.calc {
  padding: 10px;
  background-color: orange;
  color: white;
  width: 200px;
  text-align: center;
  margin-left: calc(50% - 100px);
}

var()

有了 var() 这个函数，我们可以将一个 CSS 变量的值作为另一个 CSS 属性的值。简单来说，比如，我们可以定义一种颜色，将其写在自定义属性（CSS 变量）中，然后通过调用 var() 函数去拿到对应的值（我们的颜色）。

有了 CSS 变量，将会很大程度提高了可维护性并减少重复性。其中一个场景就是网站的主题色。下面是我写的关于这个主体的文章：

var() 函数接收两个参数，自定义的属性和默认值，当第一个参数引用的自定义属性无效时，会使用第二个参数。

:root {
  --bg-color: green;
  --color: white;
}

p.var {
  background-color: var(--bg-color);
  color: var(--color);
}

counter()

我个人从来没有使用过 counter() 函数，但它看起来很有意思因此被收录到本文中。如果定义了 counter 的值，这个函数会返回对应 counter 的结果。让我们结合 counter-reset 和 counter-increment 去使用这个函数。

我们可以用它来对元素计数，比如有序列表。

<div class="counter">
  <span>Mars</span>
  <span>Bounty</span>
  <span>Snickers</span>
</div>

CSS

div.counter {
  counter-reset: count;
  list-style: none;
  padding: 0;
  margin: 0;
}

div.counter > span {
  counter-increment: count;
}

div.counter > span::before {
  content: counter(count, decimal) '. ';
  color: orange;
}

circle()

circle() 这个函数会创建一个圆形区域覆盖在元素之上。你可以设置它的半径和位置。通常使用图片去创建一个圆形区域。这个函数的结果常用于 clip-path 属性的值。

此外，值得一提的是，除了圆形，你还可以创建椭圆或多边形。

<img
  class="circle"
  src="https://devinduct.com/Uploads/PostImages/1122dcb9-954a-4641-9ca6-c38e9472698f.png"
/>

CSS

img.circle {
  clip-path: circle(30%);
}

结论

正如我此前多次提到的，很多情况下，前端开发会忽略 CSS 的便捷之处，因此它们的网站变得复杂。CSS 每年会向我们提供很多新的函数，使得 JavaScript 能专注于其他事情，而不是操作样式，这一点很好。

感谢你的阅读，我们下一篇见。

avatar
文章
阅读
粉丝