Question

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

但是当我在其他类中嵌套时，我在grunt中使用的Less编译器不会识别循环生成的类.m-b-0，但是.m-b-1和.m-b-10之类的类将被正确识别。 / p>

我的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);

我使用应该在相同的较少文件中生成的类，如下所示：

.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编译中使用零值迭代器或者我在哪里错了？谢谢！

Answer 1

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

.m-t-@{i}

看看是否有帮助。

为什么LESS编译器不会识别零迭代器生成的类？

1 个答案: