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

redbuck
  • 2.6k

我有一个雪碧图,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如下
image.png

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

回复
阅读 2.1k
1 个回答
✓ 已被采纳

解决了,如下所示:

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏