你能做一个javascript的循环里面的LESS CSS吗？ [英] Can you do a javascript for loop inside of LESS css?

问题描述

我想在Less中做一个for循环。是否可以在Less里面做这个？我知道它有能力评估js，但在这个程度？

I am looking to do a for loop inside of Less. Is it possible to do this inside of Less? I know it has the capability to evaluate js but to this degree?

推荐答案

我会建议checkout Twitter Bootsrap 。他们正在以这种方式建造电网系统。

I will recommend to checkout Twitter Bootsrap. They are building their grid system that way. They loop, with recursion, in a less mixin, instead of typing every class they need.

有趣的部分是在mixins.less文件中，在less目录中，下面是//网格注释（行516）。有趣的部分是：

The interesting part is in mixins.less file, in the less directory, below "// The Grid" comment (line 516). The interesting portion is:

#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));
      }
 ...

在grid.less文件中调用less目录：

Which is called in grid.less file in less directory this way:

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

这会产生（除其他事项外）：

Which produce (among other things):

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

< /github.com/twitter/bootstrap/blob/master/docs/assets/css/bootstrap.css\">bootstrap.css 第170行。

对于@gridColumnWidth，@gridGutterWidth和其余变量检查variables.less文件（第184行）

For @gridColumnWidth, @gridGutterWidth and the rest of variables check variables.less file (line 184)

确保安装了最后一个版本的lessc节点编译器。

Be sure to have the last version of lessc node compiler installed.

这篇关于你能做一个javascript的循环里面的LESS CSS吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！