Question

这是我的循环：

@loop-start: 1;
@loop-end: 20;
.loop(@n, @i) when (@n =< @loop-end) {
  .testi-square:nth-of-type(@{n}) {order: (@i);}
  .testi-square:nth-of-type(@{n + 1}) {order: (@i + 1);}
  .testi-square:nth-of-type(@{n + 2}) {order: (@i + 2);}

  .loop((@n + 3), (@i + 6)); // next iteration
}
.loop(@loop-start, @loop-start); // launch the loop

这是我得到的错误：

Running "less:compileThemeWeb" (less) task
ParseError: Missing closing ')' in less/theme-web.less on line 3630, column 29:
3629   .testi-square:nth-of-type(@{n}) {order: (@i);}
3630   .testi-square:nth-of-type(@{n + 1}) {order: (@i + 1);}
3631   .testi-square:nth-of-type(@{n + 2}) {order: (@i + 2);}
Warning: Error compiling less/theme-web.less Use --force to continue.

Aborted due to warnings.

我正在使用最新的Bootstrap来创建我的主题。在过去的6个月里我一直在使用它，没有任何问题，我怀疑LESS的版本太旧了。不知道如何解决这个问题，看起来像语法的东西，但不确定。一整天都在盯着http://lesscss.org/features/#loops-feature，在互联网上搜索，但没有骰子。

Answer 1

错误是由于以下几行：

.testi-square:nth-of-type(@{n + 1}) {order: (@i + 1);}
.testi-square:nth-of-type(@{n + 2}) {order: (@i + 2);}

当编译器遇到@{n + 1}时，它会查找名为n + 1的变量。您没有任何名为n + 1的变量（并且它也不是有效的语法）。因此，它会导致编译错误。解决方法是使用类似的东西：

@loop-start: 1;
@loop-end: 20;
.loop(@n, @i) when (@n =< @loop-end) {
  .testi-square:nth-of-type(@{n}) {order: (@i);}
  @temp: @n + 1;
  .testi-square:nth-of-type(@{temp}) {order: (@i + 1);}
  @temp2: @n + 2;
  .testi-square:nth-of-type(@{temp2}) {order: (@i + 2);}

  .loop((@n + 3), (@i + 6)); // next iteration
}
.loop(@loop-start, @loop-start); // launch the loop

正如他的评论中七阶段-max所述，我们不能在选择器插值中使用表达式，函数调用等。只允许变量。

使用Grunt + Bootstrap 3时出现LESS Loop错误

1 个答案: