你能在LESS css里面做一个循环的javascript吗？

Question

我想在Less里面做一个for循环.是否可以在Less内部执行此操作？我知道它有能力评估js但在这个程度上？

Answer 1

我会建议结账Twitter Bootsrap.他们正在建设他们的网格系统.它们以递归方式循环,而不是键入所需的每个类.

有趣的部分是在mixins.less文件中,在less目录中,在"// Grid"注释下面(第516行).有趣的部分是:

#grid {

    .core (@gridColumnWidth, @gridGutterWidth) {

      .spanX (@index) when (@index > 0) {
        (~".span@{index}") { .span(@index); }
        .spanX(@index - 1);
      }
      .spanX (0) {}

      ...

      .span (@columns) {
        width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
      }
 ...

这种方式在less目录中的grid.less文件中调用:

#grid > .core(@gridColumnWidth, @gridGutterWidth);

哪个产生(除其他外):

.span12 {
  width: 940px;
}
.span11 {
  width: 860px;
}
.span10 {
  width: 780px;
}
...

在bootstrap.css第170行.

对于@gridColumnWidth,@ grigGutterWidth和其余变量检查variables.less文件(第184行)

确保安装了最新版本的lessc节点编译器.