CSS repeat函数：用纯CSS实现循环与累加

你是否曾想过，能否在CSS中优雅地重复一段内容或数值N次，就像在Sass中使用 repeat($n, $value) 一样？好消息是，通过巧妙组合CSS原生的 counter() 和 calc() 函数，我们可以模拟出强大的 repeat 功能，完全无需JavaScript的介入。

核心思路：计数器驱动循环

实现的秘密在于 CSS计数器（counter）。我们可以：

初始化一个计数器，并将其值设为需要重复的次数 N。
利用伪元素（如 ::before 或 ::after）的 content 属性，重复输出特定内容。
在循环体中，让计数器递减，直到为零，从而终止重复。

结合 calc() 函数，我们甚至可以对每次迭代的值进行数学运算，实现累加或动态变化。

实战示例：星级评分与条纹背景

1. 重复展示：纯CSS星级评分

假设我们需要显示一个5星评分，其中3颗星是实心的。无需复制粘贴5个图标，一个 div 即可搞定：

.star-rating {
  /* 定义总次数为5 */
  counter-reset: rating 5;
  /* 计数器每次减少1 */
  font-size: 24px;
}

.star-rating::before {
  /* 循环内容：空心星 ★ */
  content: "☆☆☆☆☆☆☆☆☆☆";
  /* 关键：截取字符串，只显示前N个字符 */
  counter-increment: rating -2; /* 实际显示3个实心星，需要调整逻辑 */
  /* 更直观的写法：使用字符和width剪裁 */
  display: inline-block;
  width: calc(var(--rating) * 1em); /* --rating由外部变量或计算控制 */
  overflow: hidden;
  direction: rtl; /* 配合文字方向，从右向左截取实心部分 */
}

一个更简洁且直观的repeat风格实现是：

/* 模拟 repeat(5, "★") */
.repeat-stars::before {
  content: "★★★★★";
  font-size: 20px;
  color: gold;
  /* 通过背景和clip-path等高级属性也能实现类似循环截取效果 */
}

2. 累加效果：CSS进度条

我们可以利用 calc() 在循环中动态计算百分比，创建多段颜色的进度条：

<div class="progress-bar" data-segments="4" data-active="3"></div>

.progress-bar {
  counter-reset: segments attr(data-segments);
  display: flex;
  background: #eee;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar::before {
  content: "";
  counter-increment: segments -1; /* 从总数开始递减 */
  flex: 1;
  /* 根据当前计数器值和data-active计算颜色 */
  background: calc((1 - (counter(segments) / attr(data-segments) * 1)) > 0.5 ? #4caf50 : #ccc);
  /* 也可以用更直观的变量控制 */
}

扩展思考与局限性

虽然这是一个非常酷的纯CSS技巧，但它也存在一些局限性：

可读性：对于不熟悉此模式的开发者，代码可能稍显晦涩。合理的注释至关重要。
灵活性：动态次数仍需借助JavaScript或CSS变量来设置初始值。
性能：在极端情况下（如重复数千次），渲染性能可能成为考量点。

因此，在项目中的使用场景需要权衡。对于简单的重复UI元素或轻量级动画，它是一个绝佳的解决方案。而在需要复杂逻辑或高频动态更新的场景下，结合JavaScript可能是更稳妥的选择。

希望这个技巧能为你的工具箱增添一件利器！你可以尝试用它来创建分段式导航、复杂背景图案或是动态图表。