Position icons in the staggered order

staggered.less

@step: @icon-size + 12 / 1366 * 100vw;
@t: @icon-size * 0.35;
@l: -@icon-size;
@d: 5ms;

@from: 0;
@to: 17;
@break: 6;
.loop(@index) when(@index =< @to) {
  @i: @index + 1;

  & when (not(mod(@i, 2) = 0)) {
    &:nth-child(@{i}) {
      top: @step * (@i - 1) / 2;
      left: 0;
      transition-delay: (@to - @index) * @d;
    }
  }

  & when (mod(@i, 2) = 0) {
    &:nth-child(@{i}) {
      top: @t + @step * (@i - 2) / 2;
      left: @l;
      transition-delay: (@to - @index) * @d;
    }
  }

  & when (@index <= @break) {
    @c: @break - @index;

    &:nth-child(@{i}):nth-last-child(@{c}) {
      top: @step * @index;
      left: 0;
      transition-delay: (@break - @i) * @d;
    }
  }

  .loop(@index + 1);
}

.full-page--icons > a {
  .loop(@from);

  &.moving {
    top: 0 !important;
    left: 0 !important;
  }
}

This is also a fairly good example of LESS loops and "if" conditions.