纯CSS实现repeat(–n, anything)循环展示或相加功能
内容提要
本文介绍CSS自定义函数@function repeat(--n, --x)的实现，通过二进制分解和倍增技巧，将重复N次操作转化为最多8个条件判断，支持字符串拼接、数值相加等场景。原理基于快速幂思想，预生成2的幂次份副本，按二进制位选择性拼接。该函数上限255，依赖较新的CSS特性，目前炫技成分大，不适合生产环境。
延伸解读
核心原理：二进制分解与倍增
该函数将“重复N次”转化为二进制分解问题：先用倍增法预生成1、2、4、…、128份副本，再根据N的二进制位决定是否拼接对应份数。这本质上是快速幂思想，将原本需要O(N)次循环的重复压缩为最多8个条件判断，极大提升了CSS表达复杂重复逻辑的能力。
适用场景与限制
该函数适用于需要重复字符串或属性值的场景，如grid-template-columns、text-shadow、drop-shadow等。但上限为255，且依赖@function、if()、style()等较新的CSS特性，浏览器支持尚不全面。目前炫技成分较大，不适合生产环境，实际开发中建议直接写死或使用预处理器。
扩展性与兼容性考量
若需支持更大的N，可按规律增加bit8、pow8等层级。但需注意，该函数依赖的CSS新特性（如if()、style()查询、round()）仍在推广阶段，使用时需关注浏览器兼容性。建议在支持这些特性的现代浏览器中测试，并考虑降级方案。
Q&A
CSS @function repeat(--n, --x) 函数的作用是什么？
该函数用于将某个CSS token（如字符串片段或属性值）重复N次，并以空格分隔拼接起来。例如，--repeat(5, a) 会生成 'a a a a a'。它可用于字符串拼接、数值相加等场景。
CSS repeat() 函数是如何实现循环的？
它利用二进制分解和倍增（快速幂）思想：先将N转换为二进制位，然后预生成1、2、4、8、16、32、64、128份副本，最后根据二进制位选择性拼接，从而将重复N次的操作转化为最多8个条件判断。
CSS repeat() 函数支持的最大重复次数是多少？
由于只展开到bit7（对应128），该函数支持的最大N是255（2^8 - 1）。如果需要更大，可以继续扩展bit8、bit9等。
CSS repeat() 函数依赖哪些较新的CSS特性？
它依赖@function、if()函数、style()查询以及round()数学函数，这些都属于较新的CSS规范（CSS Values 4 / CSS Functions），目前浏览器支持仍在铺开阶段，需注意兼容性。
CSS repeat() 函数适合在生产环境中使用吗？
目前不太适合。作者指出这种案例炫技成分较大，实际开发中多半还是老老实实写死字符平铺，而不会使用自定义的--repeat函数。
CSS repeat() 函数可以用于哪些实际场景？
它可以用于字符串循环拼接（如content属性）、text-shadow阴影重复、drop-shadow滤镜重复、shape()函数中的路径重复等。例如，--repeat(7, "😂 ") 会生成7个表情符号。
CSS repeat() 函数中的 --x 参数为什么可以是字符串或属性值？
因为CSS自定义属性存储的是未解析的token序列，--x只是被当作一段token反复拼接，函数本身不关心其语义，所以既能拼grid-template-columns的1fr，也能拼文本片段，最终由使用方的属性去解释。
