一些有用的CSS函数

var

使用自定义的属性值。

:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}

attr

使用html上data-* 属性引用的文本。

<p data-foo="hello">world</p>

p:before {
  content: attr(data-foo) " ";
}

属性也可以被解析为color、url等，但这还是实验性的技术。

calc

在数字值上进行基本的算术运算。

/* property: calc(expression) */
width: calc(100% - 80px);

min

从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值。

/* property: min(expression [, expression]) */
width: min(1vw, 4em, 80px);

max

从逗号分隔符表达式中选择一个最大值作为 CSS 的属性值。
用法和min()一样。

clamp

把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。

 font-size: clamp(1.8rem, 2.5vw, 2.8rem);