Задать вопрос
AlekseyPavlov
@AlekseyPavlov
пока Null-программист
html

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

Хочу сделать рекурсию, чтобы блоки были анимированы как в здесь (но уже на 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);
  • Вопрос задан
  • 216 просмотров
2 комментария
Подписаться 1 Средний 2 комментария
Решения вопроса 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();
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Доработка Django приложения и исправление ошибок конфигурации
25 апр. 2024, в 20:14
1000 руб./за проект
Завершение разработки проекта на CS2
25 апр. 2024, в 20:02
100000 руб./за проект
Требуется завершить backend (проектная работа)
25 апр. 2024, в 19:42
49000 руб./за проект
Ещё заказы