如何将CSS函数为高效？
摘要：var 使用自定义的属性值。 :root { --main-bg-color: pink; } body { background-color: var(--main-bg-color); } attr 使用html上data-* 属性引用
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);