纯CSS实现repeat循环展示，解锁新布局可能

在前端开发中，我们经常需要重复展示或累加一组元素，例如创建动态数量的列表项、网格布局或复杂的装饰性图案。传统上，这类需求往往依赖JavaScript来动态生成DOM结构。但今天，我们介绍一个令人兴奋的纯CSS技巧，它能优雅地模拟类似repeat(n, anything)的功能，让我们仅凭CSS就能实现元素的循环与相加。

核心原理：CSS变量的动态计算

实现这一功能的关键在于巧妙地利用CSS自定义属性（CSS Variables）和calc()函数。核心思路是：

定义重复次数：通过一个CSS变量（如--count）来声明我们想要重复的次数。
逐个生成并累加：利用CSS选择器和:nth-child()伪类，结合calc()函数进行循环式的计算和样式覆盖。通过为每一个后续的子元素设置不同的、累加的CSS变量值（如--index），我们可以让每个元素“知道”自己是第几个，并据此计算或应用样式。

下面是一个精简的示例，演示如何将5个相同的div显示为不同宽度的彩色条，宽度依次递增：

.repeat-container {
  --count: 5; /* 声明重复5次 */
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.repeat-item {
  height: 20px;
  /* 初始宽度为0，后续元素通过变量覆盖 */
  width: calc(var(--index) * 20%);
  background: hsl(calc(var(--index) * 40), 80%, 70%);
  transition: all 0.3s ease;
}

/* 核心：为第1个到第5个子元素逐个设置 --index 变量 */
.repeat-item:nth-child(1) { --index: 1; }
.repeat-item:nth-child(2) { --index: 2; }
.repeat-item:nth-child(3) { --index: 3; }
.repeat-item:nth-child(4) { --index: 4; }
.repeat-item:nth-child(5) { --index: 5; }

在这个例子中，我们无需写5条独立的宽度规则。通过定义一个变化的--index变量，calc()函数自动为我们计算出每个元素应有的宽度。这完美模拟了repeat(5, something)的循环逻辑。

应用场景：从简单到复杂

这个技巧的潜力远不止于此。我们可以将其应用于更复杂的场景：

1. 创建等分的网格系统

结合CSS Grid，我们可以快速创建一个由纯CSS控制列数的响应式网格。只需更改父容器的--count变量，网格的列数就会相应变化。

.grid-container {
  --count: 3;
  display: grid;
  grid-template-columns: repeat(var(--count), 1fr);
  gap: 1rem;
}

/* 这里需要为每个可能的子元素预设好选择器 */
.grid-container > :nth-child(n) {
  /* 此处可根据 --index 做更丰富的样式 */
}

2. 实现动态高度的柱状图

在数据可视化中，可以利用此方法构建一个纯CSS的柱状图，柱子高度由--index变量动态决定，数据变化时只需更新HTML中的类名或CSS变量。

3. 生成交替的斑马纹或复杂图案

通过巧妙地使用--index变量与modulo运算（取模），我们可以让元素应用不同的背景或边框，从而创造出复杂的视觉模式，例如棋盘格或条纹。

优势与局限性

优势：

高性能：纯CSS实现，避免了JavaScript操作DOM带来的重排重绘开销。
维护性：样式集中管理，修改重复次数或样式只需调整少量CSS变量。
响应式友好：易于与媒体查询结合，根据屏幕尺寸动态调整--count变量。

局限性：

生成静态：CSS本身无法动态改变--count的值（除非通过JavaScript修改类名或变量），因此重复次数通常是预定义的。
选择器数量：对于非常大的重复次数（如50次），需要编写大量nth-child选择器，会增加CSS文件体积。此时可以考虑使用CSS预处理器（如Sass的@for循环）来辅助生成这部分CSS代码。

这项技巧展现了CSS变量和计算能力的强大。它将原本需要脚本完成的工作，转化为了一种声明式、高性能的样式方案。如果你想深入了解如何构建更复杂的动态界面，不妨看看关于Lottie精准动效控制的实践，或是探讨让Agent插件可靠落地的工程化思考，它们共同指向了前端开发的精细化与工程化未来。

总结

通过模拟repeat(n, anything)的CSS技巧，我们为前端布局工具箱增添了一个强大的新工具。它不仅能简化重复性UI的开发，还为我们用纯CSS表达更复杂的界面逻辑提供了新的思路。随着浏览器性能的持续提升和CSS规范的不断演进，这类技巧的应用价值将会越来越高。

下次当你需要循环生成界面元素时，不妨先尝试用纯CSS解决，或许会收获意想不到的简洁与高效。