less-loop-1

less-loop-1

.generate-columns(9);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .float@{i} {
    animation: ~'float@{i}' 5s ease-in-out infinite;
  }
  .generate-columns(@n, (@i + 1));
}

result :


.float1 {
  animation: float1 5s ease-in-out infinite;
}
.float2 {
  animation: float2 5s ease-in-out infinite;
}
.float3 {
  animation: float3 5s ease-in-out infinite;
}
.float4 {
  animation: float4 5s ease-in-out infinite;
}
.float5 {
  animation: float5 5s ease-in-out infinite;
}
.float6 {
  animation: float6 5s ease-in-out infinite;
}
.float7 {
  animation: float7 5s ease-in-out infinite;
}
.float8 {
  animation: float8 5s ease-in-out infinite;
}
.float9 {
  animation: float9 5s ease-in-out infinite;
}