你能在更少的css中为循环编写javascript吗？

我希望做一个循环内的少。有没有可能在Less内部执行此操作？我知道它有能力评估js，但在这个程度上？

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

脚本

元素）这将执行循环，然后访问它，例如：

@height: `doMyLoop()`

这取决于您试图通过循环实现什么。如果您希望循环输出CSS规则，我怀疑您运气不好。

这是一个黑客攻击，但是。。。 将此添加到您的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;
}

函数loopCss（计数，cssTemplate）{
//结束现有未使用的类
var result=“0；}\n”；
//添加自定义css
对于（var i=0；i我建议签出。他们正以这种方式构建他们的网格系统。他们使用递归在较少的混合中循环，而不是键入他们需要的每个类

有趣的部分位于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);

生产（除其他外）：

第170行

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

请确保安装了最新版本的lessc node compiler。
LESS只是一个CSS预编译器。最终的结果是纯CSS。我看不出Javascript是从哪里来的？@Pekka:LESS可以动态执行，既可以在浏览器中的客户端执行，也可以通过node.js（）在服务器端执行。其语法的一部分实际上是计算JavaScript表达式，例如（客户端）：
@height:`document.body.clientHeight`
@T.J.啊，你知道什么！很有趣，谢谢。我正在尝试创建一个以24列网格创建的循环。基本上，我希望它循环24次并编写网格类..grid_1，.grid_2，….grid24这可以通过上面AlessMascherpa给出的示例，使用小mod，T完成当输出下降（10,9,8…）与上升（1,2,3…）时，它只是一个风格上的东西。谢谢。如果有人在理解上有困难/需要更详细的解释：我昨晚刚在Bootstrap中看到这个，它让我大吃一惊，然后我不得不在我自己的网格库中实现它。太棒了！很高兴你发现它有用@kalisjoshua！欢迎大家高兴：）只需快速启动即可：.spanX（@index-1）起作用，.spanX（@index-1）失败。循环在LESC编译器的0.4.0版
（~“.span@{index}”）中已更改。
变为
span@{index}
.span12 {
  width: 940px;
}
.span11 {
  width: 860px;
}
.span10 {
  width: 780px;
}
...