为什么 LESS 编译器无法识别零迭代器生成的类？答案

【问题标题】：Why LESS compiler wont recognize classes generated by zero iterator?为什么 LESS 编译器无法识别零迭代器生成的类？
【发布时间】：2017-04-06 21:23:52
【问题描述】：

我的 CSS 表需要重置一些 Bootstrap 3 预设值以制作我想要的样式，因此我需要像 .m-b-0 这样设置 margin-bottom:0px 的实用程序类。

但是当我将它们嵌套在其他类中时，我在 grunt 中使用的 Less 编译器无法识别循环生成的类 .m-b-0，但是像 .m-b-1 和 .m-b-10 这样的类将被正确识别。

我的 Less 文件中的循环代码是这样的：

.m-loop (@i) when (@i <= @iterations) {
  .m-@{i}{
    margin: ~"@{i}px";
  }
  .m-h-@{i}{
    margin-left: ~"@{i}px";
    margin-right: ~"@{i}px";
  }
  .m-v-@{i}{
    margin-top: ~"@{i}px";
    margin-bottom: ~"@{i}px";
  }
  .m-l-@{i}{
    margin-left: ~"@{i}px";
  }
  .m-r-@{i}{
    margin-right: ~"@{i}px";
  }
  .m-t-@{i}{ 
    margin-top: ~"@{i}px";
  }
  .m-b-@{i}{
    margin-bottom: ~"@{i}px";
  }
  .m-loop(@i + 1);
}
.m-loop(0);

我使用应该在同一个 less 文件中生成的类，如下所示：

.panel{
  .m-b-0;
}

然后我的编译器抛出了

Running "less:production" (less) task
>> NameError: .m-b-0 is undefined in ../css/less/stylesheet.less on line     237, column 3:
>> 236   div.panel{
>> 237   .m-b-0;
>> 238   }
Warning: Error compiling ../css/less/stylesheet.less Used --force, continuing.

这是否禁止在 Less 编译中使用零值迭代器，或者我在哪里弄错了？谢谢！

【问题讨论】：

标签： css twitter-bootstrap less

【解决方案1】：

看起来可能存在语法错误。我在这一行没有看到左大括号：

.m-t-@{i}

看看有没有帮助。

【讨论】：

抱歉，这是一个编辑问题。循环代码正在运行。它生成了所需的 CSS，但是当我通过 mixin/nesting 在同一个 LESS 文件中使用生成的类时会失败。