纯CSS实现repeat(–n, anything)循环展示或相加功能

在日常开发中，我们经常需要在页面上重复展示某些元素，或者对一组数值进行累加。通常，我们会第一时间想到使用JavaScript来完成。但今天，我们将一起探索一个更为“纯粹”且充满巧思的纯CSS解决方案，它能实现类似 repeat(–n, anything) 的功能。

CSS现状与痛点

目前，CSS原生并未提供一个可以直接循环生成多个元素或重复某个属性值的函数。像 background-image 的 linear-gradient 或 repeat() 背景图重复，虽然能实现视觉上的“重复”，但无法直接操作或生成DOM结构或计算数值。

对于需要展示n个相同卡片、生成n个导航点、或是计算一组间距的场景，我们往往依赖JavaScript动态创建元素。这虽然有效，但增加了脚本依赖和DOM操作成本。

纯CSS循环原理

我们的核心思路是：利用CSS自定义属性（变量）的级联特性，结合 calc() 函数进行计算，从而“模拟”出循环效果。

关键步骤如下：

定义一个自定义属性：我们声明一个变量，例如 --i，并在父容器上将其初始值设为 0。这个变量将充当我们的循环计数器。
创建循环结构：在父容器中放置一个或多个子元素。通过CSS选择器，我们让这些子元素共享一个计数器逻辑。
使用选择器实现迭代：这是最核心的部分。我们利用 :nth-child 伪类选择器或属性选择器，为子元素设置不同的 --i 值。例如：
```
.container > *:nth-child(1) { --i: 0; }
.container > *:nth-child(2) { --i: 1; }
.container > *:nth-child(3) { --i: 2; }
```
更优雅的写法是使用通配选择器结合 calc()，但需要预先知道大概的循环次数或使用最大值约束。
应用变量：子元素就可以根据 --i 的值来动态调整自身样式了。比如，实现一个阶梯式的布局：
```
.item {
    /* 利用 --i 计算左边距 */
    margin-left: calc(var(--i) * 20px);
}
```

对于“累加”功能，我们可以定义一个总和变量 --sum，初始值为0，然后每个子元素将自己代表的值累加上去。后续元素便可以读取这个不断增长的 --sum 变量。

一个简单的代码示例

假设我们需要生成5个圆点，并让它们的背景色从红到蓝渐变。纯CSS实现如下：

<div class="dots">
  <span></span><span></span><span></span><span></span><span></span>
</div>

.dots {
  --count: 5; /* 定义总数量 */
  display: flex;
  gap: 8px;
}

.dots > span {
  /* 基础样式 */
  width: 16px;
  height: 16px;
  border-radius: 50%;
  /* 核心：利用 calc 和 var(i) 生成色相值 */
  background: hsl(calc(var(--i) * 60), 80%, 50%);
}

/* 为每个子元素设置 --i 值 */
.dots > *:nth-child(1) { --i: 0; }
.dots > *:nth-child(2) { --i: 1; }
.dots > *:nth-child(3) { --i: 2; }
.dots > *:nth-child(4) { --i: 3; }
.dots > *:nth-child(5) { --i: 4; }

这段代码没有任何JavaScript，却根据子元素的位置动态生成了不同的色相值，实现了颜色的平滑过渡。这体现了CSS的计算能力和声明式的美感。对于更复杂的交互式循环或条件分支，目前CSS的能力仍有局限，深入解析 React Server Components 的渲染机制等现代前端框架在组件化和动态渲染方面提供了更强大的抽象。

应用场景与思考

纯CSS循环方案特别适用于：

装饰性或结构性重复：如背景图案、加载动画的进度点、阶梯式布局。
已知数量的固定布局：如固定数量的导航项、星级评分展示。
轻量级数值计算：基于位置的样式计算，减少JS交互。

这种方法虽然精巧，但也存在局限性，比如需要手动维护选择器列表（或使用更高级的CSS特性如 :nth-child(of S)，目前浏览器支持度不一），且无法实现复杂的动态数据绑定。它更像是一种CSS能力的边界探索和思维拓展。

总结

通过组合使用CSS自定义属性、calc() 函数和伪类选择器，我们能够在纯CSS中模拟出循环和累加的逻辑。这不仅是对CSS强大能力的又一次印证，也为我们解决前端问题提供了除JavaScript之外的新思路。在合适的场景下使用，可以写出更简洁、更声明式、减少依赖的代码。

下次当你面临重复元素的样式生成时，不妨先停下来想一想：这个问题，能否用优雅的纯CSS方案来解决？

本文为对张鑫旭先生博文的翻译与润色，旨在分享这一优秀的CSS技巧。