LESS：循环使用存储在数组中的数据（或类似的东西） [英] LESS: Loop using data stored in an array (or something similar)

问题描述

LESS：

  .generate柱（4）; （@i =< @n）{
 .column  -  @ {i} {
 width：
 $ b $ .generate-columns（@n，@i：1） （@i * 100％/ @n）; 
} 
 .generate-columns（@n，（@i + 1））; 
 
 $ / code $ / pre 
 $ b $输出CSS：
 
 
  .column-1 {
 width：25％; 
} 
 .column-2 {
 width：50％; 
} 
 .column-3 {
 width：75％; 
} 
 .column-4 {
 width：100％; 
 
 $ 
 
 
 
 
这个循环生成4个不同的div，因为'4'是第一个mixin的调用，但是生成的值是在mixin中完全计算的。换句话说， @n 隐式指示迭代次数。
 
 
我希望能够设置一种数值数组，如：
 
 
 PSEUDO-CODE：
 
 
  .generate-columns（[25,50,75,100]）; 
  
应该传递给循环mixin，然后使用每个数组的值生成相同的CSS代码。是否有可能？
解决方案
 
  .generate-columns-loop（@i; @widths ）（@i <= length（@widths））{
 .column  -  @ {i} {
 @width：extract（@widths，@i）; 
宽度：（@width * 1％）; 
} 
 .generate-columns-loop（（@ i + 1），@widths）; 
} 
 .generate-columns（@widths ...）{
 .generate-columns-loop（1，@widths）; 
} 
 
 .generate-columns（25，50，75，100）; 
  
 
I found this example in LESS documentation:

LESS:
.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}
OUTPUT CSS:
.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}
This loop generates 4 different divs because '4' was the value passed by firs mixin's call, but generated values are entirely calculated inside mixin. In other words, @n implicitly indicates "number of iterations".

I would like to be able to set a sort of "array of values" such as:

PSEUDO-CODE:
.generate-columns( [25,50,75,100] );
that should be passed to loop mixin and then generates the same CSS code, using each array's value. Is it possible?
解决方案
.generate-columns-loop(@i; @widths) when (@i <= length(@widths)) {
  .column-@{i} {
    @width: extract(@widths, @i);
    width: (@width * 1%);
  }
  .generate-columns-loop((@i + 1), @widths);
}
.generate-columns(@widths...) {
  .generate-columns-loop(1, @widths);
}

.generate-columns(25, 50, 75, 100);


                        
这篇关于LESS：循环使用存储在数组中的数据（或类似的东西）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！