能否在LESS CSS内部使用JavaScript for循环？

Question

能否在LESS CSS内部使用JavaScript for循环？

javascriptcssfor-loopless

11

我想在Less中进行for循环。在Less中是否可以实现这一点？我知道它具有评估js的能力，但到这种程度吗？

- Steven Walker

1

LESS只是CSS的预编译器，最终结果是普通的CSS。我不明白JavaScript在其中扮演了什么角色？ - Pekka

2

@Pekka：LESS可以在浏览器客户端和通过Node.js服务器端动态执行（更多信息请点击这里）。它的语法的一部分是确实要评估JavaScript表达式，例如（客户端）：@height: \document.body.clientHeight`;`。 - T.J. Crowder

@T.J. 啊，你知道什么！有趣，谢谢。 - Pekka

3个回答

2

在文档中没有关于循环的内容，但是由于可以通过反引号访问JavaScript表达式，您始终可以在脚本中定义一个函数（不是LESS代码，而是JavaScript代码 - 例如，在浏览器中，您将有一个单独的

- T.J. Crowder

1

我正在尝试创建一个循环，用于创建一个24列的网格。基本上，我希望它循环24次并写入网格类别：.grid_1, .grid_2, ...., .grid_24。 - Steven Walker

这可以通过对AlessMascherpa上面给出的示例进行小修改来完成，尽管输出是向下步进(10,9,8...)而不是向上步进(1,2,3...)，但它只是一种风格上的差异。 - augurone

1

这是一个hack但是... 将此添加到您的less文件中。

@testColor: green;

unusedclass {
    unknownprop: ~`loopCss(10,".group{{i}} { background-color: @{testColor}; }")`
}

创建一个名为loopCss.js的JavaScript文件，并编写以下函数：

function loopCss(count,cssTemplate) {
    // end the existing unused class
    var result = "0;}\n";
    // Add your custom css
    for(var i=0; i<count; i++) result += cssTemplate.replace("{{i}}",i) +"\n";
    // Handle the close bracket from unused class
    result += "unusedclass {";
    return result;
}

现在在 less.js 之前引入 loopCss.js，它应该可以工作了。

- matsondawson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AlessMascherpa · Accepted Answer

我建议使用Twitter Bootstrap。他们正在用这种方式构建他们的网格系统。他们在less mixin中使用循环和递归，而不是手动输入每个所需的类。

有趣的部分在less目录下的mixins.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 node 编译器。