使用 Grunt + Bootstrap 3 时出现 LESS 循环错误答案

【问题标题】：LESS Loop error when using Grunt + Bootstrap 3使用 Grunt + Bootstrap 3 时出现 LESS 循环错误
【发布时间】：2017-02-04 11:50:46
【问题描述】：

这是我的循环：

@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 上网，但没有骰子。

【问题讨论】：

nth-of-type(@{n + 1}) - 这是无效的 Less 代码。您不能使用带有选择器插值的表达式或其他任何东西（函数调用等），只能使用纯变量，例如@{n} 有效，@{n + 1} 无效。
对不起@seven-phases-max。在看到您的评论之前发布了答案。认为您应该也发布您的评论作为答案。

标签： css loops twitter-bootstrap-3 gruntjs less

【解决方案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

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

【讨论】：