Skip to main content

内置函数

clamp()​

官方文档

clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。 clamp() 被用在 <length>、<frequency>、<angle>、<time>、<percentage>、<number>、<integer> 中都是被允许的。

clamp(MIN, VAL, MAX)` 其实就是表示 `max(MIN, min(VAL, MAX))

这个效果和 Fluid Typography 一致，但只用了一行代码，且不需要媒体查询语句。

使用案例​

字体自适应

.clampSize{
    font-size:clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);  /* 通过动态计算首选值实现响应式字体变化 */
}

calc()​

又名属性计算

height: calc(100% - 64px);

repeat()​

重复输出给定的变量

使用场景：

  • 快速设置多段的grid列宽和行高
// 重复两次 100px 20px 80px， 既6列
grid-template-columns: repeat(2, 100px 20px 80px);

// 3x3 列宽和行高都占33.3%
grid-template-columns: repeat(3, 33.33%); 
grid-template-rows: repeat(3, 33.33%);