css - 无法正确执行 Less CSS 循环

Question

我正在尝试创建不同的循环(类应该有不同的背景颜色)，但我只能编译第一个循环。

这是一个例子:http://codepen.io/anon/pen/MyWgdo?editors=1100

我正在使用的代码:

@temp0-9: #1976d2;
@temp10-20: #00bcd4;
@gap1: 10;
@gap2: 10;


.first (@i) when (@i > 0) {
  span.temp-@{i} {
    display:block;
    background: @temp0-9;
  }
  .first(@i - 1);
}
.first(@gap1);

.second (@i) when (@i > 15) {
  span.temp-@{i} {
    display:block;
    background: @temp10-20;
  }
  .second(@i - 1);
}
.second(@gap2);

编译结果如下:

 span.temp-9 {
  display: block;
  background: #1976d2;
}
span.temp-8 {
  display: block;
  background: #1976d2;
}
span.temp-7 {
  display: block;
  background: #1976d2;
}
span.temp-6{
  display: block;
  background: #1976d2;
}
span.temp-5{
  display: block;
  background: #1976d2;
}
span.temp-4{
  display: block;
  background: #1976d2;
}
span.temp-3{
  display: block;
  background: #1976d2;
}
span.temp-2{
  display: block;
  background: #1976d2;
}
span.temp-1{
  display: block;
  background: #1976d2;
}
span.temp-0{
  display: block;
  background: #1976d2;
}

只有 10 个条目，而不是我预期的 20 个。

有什么帮助吗？

Answer 1

您的循环保护条件有误。 guard 条件指出只有当输入 (@i) 大于 15 但作为输入传递的值 (@gap2) 仅为 10 时才会执行循环，并且因此循环永远不会被执行。

对于您期望的输出，请像下面的代码片段一样更改警戒条件。现在，守卫是 @i > 0，因此循环将被执行，但是第二个 mixin 中的选择器插值使用 @j 变量(即 @我 + @gap1)。由于我们将 @gap1 添加到循环的索引中，因此编号。对于第二个循环，附加到选择器的值将大于 10。

@temp0-9: #1976d2;
@temp10-20: #00bcd4;
@gap1: 10;
@gap2: 10;

.first (@i) when (@i > 0) {
  span.temp-@{i} {
    display:block;
    background: @temp0-9;
  }
  .first(@i - 1);
}
.first(@gap1);

.second (@i) when (@i > 0) {
  @j: @i + @gap1;
  span.temp-@{j} {
    display:block;
    background: @temp10-20;
  }
  .second(@i - 1);
}
.second(@gap2);

Demo @ Less2CSS.org

---

如果您有多个这样的间隙，那么编写一个循环(具有复杂的逻辑)会比编写多个循环混合更好。下面是一个示例:

@gaps: 46, 19, 3, 4, 4, 14; /* the gap array */
@temps: red, crimson, orange, gold, yellow, green; /* the temps corresponding to each gap */

.gaps-loop(@i, @prevgap) when (@i > 0){
  @gap: extract(@gaps, @i); /* extract each gap one by one based on loop index */
  @temp: extract(@temps, @i); /* extract the temp corresponding to each gap */
  .span-gen-loop(@j) when (@j < @gap){
    /* loop to generate spans - executed as many times as @gap */
    @k: @j + @prevgap; /* add current index to previous gaps - this generates a running number from 0-90 */
    span.temp-@{k}{
      display:block;
      background: @temp;
    }
    .span-gen-loop(@j + 1);
  }
  .span-gen-loop(0);
  .gaps-loop(@i - 1, @prevgap + @gap); /* send current gap + previous gap(s) */
}
.gaps-loop(length(@gaps), 0); /* loop as many times as there are gaps */