Why doesn't my less code compile to CSS?

Question

css

I want to do a recursion so that the blocks are animated like in here (but already on less): https://codepen.io/verlangieri/pen/BzomqR
But less just refuses to compile:

@squareI: 0;
@x: 0;
@y: 0;
.y(@y) when (@y < 10) {
  @delayI: @y;
  .x(@x) when (@x < 10) {
    @squareI: @squareI + 1;
    @delayI: @delayI + 1;
    @output: 0.2 * @delayI;
    #square-@{squareI} {
      animation-delay: ~"@{output}s";
    }
    .x(@x: @x + 1);
  }
  @x: 0;
  @output: 0;
  .y(@y: @y + 1);
}
.y(@y);

There is a doubt that it is not possible to declare nested rules in less. But there was a problem with the second option. This time, another and more "live" one - swearing at the recursive variable squareI:

@squareI: 0;
@x: 0;
@y: 0;
.x(@x) when (@x < 10) {
    @squareI: @squareI + 1;
    @delayI: @delayI + 1;
    @output: @delayI * 0.2;
    #square-@{squareI} {
      animation-delay: ~"@{output}s";
    }
    .x(@x: @x + 1);
  }
.y(@y) when (@y < 10) {
  @delayI: @y;
  .x(@x);
  @x: 0;
  @output: 0;
  .y(@y: @y + 1);
}
.y(@y);

Answer 1

you are trying to write loess imperatively, as if it were sass. and it is declarative, it should be written approximately like in functional languages.
there are no variables in the usual sense, since they cannot, in fact, be changed. that is, it is not necessary to declare a variable in advance and then change its value. but here it is possible to declare another value with the same name in another scope. for example, changing values ​​can be passed as parameters on each new call.
in general, the code as you can be written something like this:

.y(@y) when (@y < 10) {
  .x(@x) when (@x < 10) {
    @squareI: @y * 10 + @x + 1;
    @delayI: @y + @x;
    @output: round(0.2 * @delayI, 1);
    #[email protected]{squareI} {
      animation-delay: ~"@{output}s";
    }
    .x(@x + 1);
  }
  .x(0);
  .y(@y + 1);
}
.y(0);

but the same is done and easier:

.delay(@i: 0) when(@i < 100)
{
  @squareI: @i + 1;
  @x: mod(@i, 10);
  @y: floor(@i / 10);
  @delay: @x + @y;
  #[email protected]{squareI} { animation-delay: ~"@{delay}s"; }
  .delay(@i + 1);
}
.delay();