如何在更少的时间内创建列表输出? [英] How to create list output in less?

问题描述

我正在尝试创建一个从另一个列表计算得出的列表.例如，如果我有一个像1,2,3,4 ...的列表，那么输出必须是10,20,30,40 ...还有其他方法可以用更少的方法从另一个列表创建一个列表吗?请参考以下代码.

I am trying to create a list which is calculated from another list. For example, if I have a list like 1,2,3,4... then the output has to be 10,20,30,40... Is there any other way to create a list from another in less? Please refer the below codes.

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

上面的实现与我期望的类似，如下.

The above implementation similar I expect like below.

.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.

and the output is #fff, #aaa, #ccc.

推荐答案

您将通过将每个循环迭代的并置结果传递给下一个迭代来创建修改后的列表"，因此最终迭代将定义实际结果.例如. (仅说明在您的用例中不采用该原理):

You'll create a modified "list" by passing the concatenated result of each loop iteration to next iteration, thus the final iteration defines the actual result. E.g. (just illustrating the principle w/o adopting it to your use-case):

// 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中呈现的方式相同，因此可以正常工作.

Technically this code does not create a one dimensional list (i.e. the result there is not really equal to @result: 10, 20, 30, 40;) but since in final CSS it's rendered identically it would work just fine.

还要假设您的原始用例是如何应用较少的函数，您真的不需要这样的代码(即，这是"XY问题"，而不是使用新列表生成新变量，而是直接生成相应的梯度值将不再那么冗长，并且更具可读性.请参阅所提问题的注释中的链接答案.

Also assuming your original use-case was How to apply less functions to gradient colors?, you don't really need a code like this (i.e. it's an "XY Problem" and instead of generating a new variable with the new list, direct generation of the corresponding gradient values would be much less verbose and much more readable. See the linked answer in comments of the mentioned question).

这篇关于如何在更少的时间内创建列表输出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！