Как создать вывод списка в меньше?

Question

Я пытаюсь создать список, который рассчитывается из другого списка. Например, если у меня есть список типа 1,2,3,4... тогда результат должен быть 10,20,30,40... Есть ли другой способ создать список из другого в меньшем? Пожалуйста, ознакомьтесь с приведенными ниже кодами.

@input: 1,2,3,4;
.for(@array)   when (default()) {.for-impl_(length(@array))}
.for-impl_(@i) when (@i > 1)    {.for-impl_((@i - 1))}
.for-impl_(@i) when (@i > 0)    {.-each(extract(@array, @i), @i)}

.create-list(@input){
  .for(@input); .-each(@value, @a) { 
     .output_@{a}(@a) {  // Create dynamic mixin based on input list
       @output_@{a}: @a * 10; // Create dynamic variable to store each calc
     } 
   }
} 
.create-list(@input);

.loop(@count) when (@count > 0){
  @prev: @count - 1;
  .loop(@prev);
  .first() when (@count = 1){ 
    .output_@{count}();  // call first mixin which created already
    @res_@{count}: @output_@{count} // Store the result in another dynamic var
  }
  .first() when not (@count = 1){
    .output_@{count}();
    @res_@{count}: @res_@{prev},  @output_@{count}; // join prev and current result
  }
  .first();  
}
.loop(4);

Вышеуказанная реализация аналогична ожидаемой ниже.

.a1(){
  @o1: #fff;
}

.a2(){
  @o2: #aaa;
}

.a3(){
  @o3: #ccc;
}

.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));   
  .a1();
   @out1: @o1;
  .a2(); 
  @out2: @out1, @o2;
  .a3();
   @out: @out2, @o3;
  div{
   colors: @out;
  }
}
.loop(1);

и вывод #fff, #aaa, #ccc.

Answer 1

Вы создадите модифицированный "список", передав конкатенированный результат каждой итерации цикла следующей итерации, поэтому последняя итерация определяет фактический результат. Например (просто иллюстрирую принцип без принятия его в ваш вариант использования):

// usage:
@input: 1, 2, 3, 4;

result {
    .modify-list(@input);
    result: @result;  
}

// impl:

.modify-list(@list) {
    @n: length(@list);
    .-(@n, extract(@list, @n) * 10);
    .-(@i, @r) when (@i > 1) {
        .-(@i - 1; extract(@list, @i - 1) * 10, @r);
    }
    .-(1, @r) {@result: @r}
}

демонстрация

Технически этот код не создает одномерный список (т. Е. Результат на самом деле не равен @result: 10, 20, 30, 40;) но так как в конечном CSS он отображается одинаково, он будет работать просто отлично.

---

Кроме того, если исходный вариант использования был следующим: Как применить меньше функций к градиентным цветам? вам на самом деле не нужен такой код (т. е. это "проблема XY"), и вместо генерации новой переменной с новым списком прямая генерация соответствующих значений градиента была бы гораздо менее многословной и намного более читаемой. связанный ответ в комментариях к указанному вопросу).