javascript - 你能在 LESS css 中做一个 javascript for 循环吗？

Question

我想在 Less 中做一个 for 循环。是否可以在 Less 中执行此操作？我知道它有评估 js 的能力，但到这个程度？

Answer 1

我会推荐结帐Twitter Bootsrap .他们正在以这种方式构建他们的网格系统。他们循环，递归，在一个 less mixin 中，而不是键入他们需要的每个类。

有趣的部分在 mixins.less 文件中，在 less 目录中，在“//The 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、@gridGutterWidth 和其他变量检查 variables.less 文件(第 184 行)

请务必安装最新版本的 lessc 节点编译器。