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

你的循环防守条件错了。保护条件表明仅当输入（@i）大于15时才执行循环，但是作为输入（@gap2）传递的值仅为10，因此循环永远不会被执行。 / p>

对于您期望的输出，请更改保护条件，如下面的代码段所示。现在，后卫是@i > 0，因此循环将被执行，但第二个mixin中的选择器插值使用@j变量（@i + @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 */

无法正确执行Less CSS循环

1 个答案: