CSS代码：
@function --repeat(--n, --x) {
--bit7: calc(round(down, var(--n) / 128));
--val6: calc(var(--n) - var(--bit7) * 128);
--bit6: calc(round(down, var(--val6) / 64));
--val5: calc(var(--val6) - var(--bit6) * 64);
--bit5: calc(round(down, var(--val5) / 32));
--val4: calc(var(--val5) - var(--bit5) * 32);
--bit4: calc(round(down, var(--val4) / 16));
--val3: calc(var(--val4) - var(--bit4) * 16);
--bit3: calc(round(down, var(--val3) / 8));
--val2: calc(var(--val3) - var(--bit3) * 8);
--bit2: calc(round(down, var(--val2) / 4));
--val1: calc(var(--val2) - var(--bit2) * 4);
--bit1: calc(round(down, var(--val1) / 2));
--bit0: calc(var(--val1) - var(--bit1) * 2);
--pow0: var(--x);
--pow1: var(--pow0) var(--pow0);
--pow2: var(--pow1) var(--pow1);
--pow3: var(--pow2) var(--pow2);
--pow4: var(--pow3) var(--pow3);
--pow5: var(--pow4) var(--pow4);
--pow6: var(--pow5) var(--pow5);
--pow7: var(--pow6) var(--pow6);
result: if(style(--bit0 = 1): var(--pow0); else: ;)
if(style(--bit1 = 1): var(--pow1); else: ;)
if(style(--bit2 = 1): var(--pow2); else: ;)
if(style(--bit3 = 1): var(--pow3); else: ;)
if(style(--bit4 = 1): var(--pow4); else: ;)
if(style(--bit5 = 1): var(--pow5); else: ;)
if(style(--bit6 = 1): var(--pow6); else: ;)
if(style(--bit7 = 1): var(--pow7); else: ;);
}
.target:before {
--repeat-demo: calc(0 --repeat(16, + 10));
width: calc(var(--repeat-demo) * 1px);
counter-reset: result var(--repeat-demo);
content: counter(result) "px" --repeat(3, " 👽");
display: block;
line-height: 30px;
background: deepskyblue;
}
HTML代码：
<div class="target"></div>
