Q:

Animation delays generation with LESS

I am trying to generate animation delays with LESS. The final result should be similar to:
[data-animation-delay="1"] {
  animation-delay: .5s;
}
[data-animation-delay="2"] {
  animation-delay: 1s;
}

My code looks like:
@animation-delays: 10;
@animation-delay-step: .5; // delay in seconds

.animation-delays-loop (@i) when (@i > 0) {
    [data-animation-step="@{i}"] {
        @animation-delay = @animation-delay-step * @{i};
        animation-delay: @animation-delay~"s";
    }
    .animation-delays-loop(@i - 1);
}
.animation-delays-loop (@animation-delays);

However, it doesn't work. The problem seems to be in animation-delay: @animation-delay~"s";. Any ideas how to correct it?

A:

OK, I ended up with doing this:
@animation-delays: 10;
@animation-delay-step: .5; // delay in seconds

.animation-delays-loop (@i) when (@i > 0) {
    [data-animation-step="@{i}"] {
        @animation-delay: @i * @animation-delay-step;
        animation-delay: ~"@{animation-delay}s";
    }
    .animation-delays-loop(@i - 1);
}
.animation-delays-loop (@animation-delays);

worked like a charm.

