less如何用循环生成动画关键帧

Question

我有一个雪碧图,4*6共24格,需要生成一个动画关键帧,用background-position来切换不同的图片.
已经完成了循环,但是有一个%号死活加不上

  .row(@i) when (@i < 6) {
    .col(@i, 0);
    .row(@i + 1)
  }

  .col(@ro, @j) when (@j < 4) {
    .position(@ro, @j);
    .col(@ro, @j + 1);
  }

  .position(@r, @c) {
    @var: (@r * 4 + @c) * 4.16;
    // 此处不能写为 @{var}%
    @{var} {
      background-position: 123.5px * @c 97px * @r;
    }
  }

  @keyframes smile {
    .row(0)
  }

生成的css如下

关键帧步骤部分始终没法加上%,加了就报错.

Answer 1

解决了,如下所示:

    @var: (@i * 4 + @j) * 4.16 * 1%;

---

吐槽下,less真是弱啊,函数这么别扭,这种模板语法也是弱爆了.