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

【问题标题】：Can you do a javascript for loop inside of LESS css?你能在 LESS css 中做一个 javascript for 循环吗？
【发布时间】：2011-11-05 18:46:18
【问题描述】：

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

【问题讨论】：

LESS 只是一个 CSS 预编译器。最终结果是纯 CSS。我没有看到 Javascript 是从哪里来的？
@Pekka：LESS 可以在浏览器客户端和通过 Node.js (more here) 的服务器端动态执行。它的部分语法确实是评估 JavaScript 表达式，例如（客户端）：@height: `document.body.clientHeight`;
@T.J.啊，你懂什么！有趣，谢谢。

标签： javascript css for-loop less

【解决方案1】：

我会推荐结帐Twitter Bootsrap。他们正在以这种方式构建他们的网格系统。它们循环使用递归，在较少的混合中，而不是键入他们需要的每个类。

有趣的部分在 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节点编译器。

【讨论】：

谢谢。如果有人无法理解/需要更详细的解释：blog.thehippo.de/2012/04/programming/do-a-loop-with-less-css
昨晚我刚刚在 Bootstrap 中看到了这个，它让我大吃一惊，然后我不得不在我自己的网格库中实现它。太棒了！
很高兴你发现它有用@kalisjoshua！总是欢迎振作起来:)
快速解决问题：.spanX(@index - 1) 有效，.spanX(@index -1) 失败。
循环在lessc编译器0.4.0版本中发生了变化(~".span@{index}")变成span@{index}leafo.net/lessphp/docs/#selector_expressions

【解决方案2】：

the docs 中没有关于循环的内容，但由于您可以通过反引号访问 JavaScript 表达式，因此您始终可以在脚本中定义一个函数（不是您的 LESS 代码，而是 JavaScript - 例如，如果在浏览器中，您会有一个单独的 script 元素）执行您的循环然后访问它，例如：

@height: `doMyLoop()`

这取决于您要通过循环实现的目标。如果您希望循环输出 CSS 规则，我怀疑您不走运。

【讨论】：

我正在尝试创建一个在 24 col 网格处创建的循环。基本上，我希望它循环 24 次并编写网格类。 .grid_1, .grid_2, ...., .grid_24
这可以通过上面 AlessMascherpa 给出的带有小模块的示例来完成，尽管输出逐步下降 (10,9,8...) 与上升 (1,2,3... )，它只是一种风格上的东西。

【解决方案3】：

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

@testColor: green;

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

使用以下函数创建一个 javascript 文件 loopCss.js：

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，它应该可以工作了。

【讨论】：