Почему мой код на less не компилируется в CSS?

Question

[Ваня Зорин]

Хочу сделать рекурсию, чтобы блоки были анимированы как в здесь (но уже на less): https://codepen.io/verlangieri/pen/BzomqR
Но less просто отказывается компилироваться:

@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);

Есть сомнение, что в less нельзя объявлять правила вложено. Но при втором варианте появилась проблема. На этот раз другая и более "живая" - ругань на рекурсивную переменную 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);

Comments

[Dima Polos]

=< это что за смайлик? По идее <=. Если не путаю, конечно.

[Ваня Зорин]

В условной конструкции допускаются следующие операторы: >, >=, =, =<, <.
А вообще я сейчас поменяю в вопросе на "<", но от этого проблема не решится.

Answer 1

[forspamonly2]

вы пытаетесь писать лесс императивно, будто это сасс. а он декларативный, на нём надо писать примерно как на функциональных языках.

здесь нет переменных в привычном смысле, поскольку их нельзя, собственно, изменять. то есть, объявлять переменную заранее и менять потом её значение - не нужно. зато здесь можно в другой области видимости объявить другое значение с этим же именем. например, изменяющиеся значения можно передавать в качестве параметров, при каждом новом вызове.

в общем, код как у вас может быть написан примерно так:

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

но то же самое делается и проще:

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