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

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

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

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

LESS Loop error when using Grunt + Bootstrap 3

css

loops

less

gruntjs

twitter-bootstrap-3