在LESS循环中连接字符串

Question

在LESS循环中连接字符串

7

我正在将Unsemantic从SASS转换为LESS，在构建循环以创建我的类时：

    .populateGridClasses (@index, @interval) when (@index > 0) {
    @num: @index * @interval;
    (~".eh-grid-@{num}, .eh-mobile-grid-@{num}, .eh-tablet-grid-@{num}") {
        .grid();
    }
   .populateGridClasses(@index - 1, @interval);
}
.populateGridClasses (0, @interval) {}

// Create the grids in an inverval of 5
.populateGridClasses(20, 5);

// 创建三等分网格 .populateGridClasses(3, 33);

它会创建以下类：

.eh-grid-100, .eh-mobile-grid-100, .eh-tablet-grid-100 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 10px;
}
.eh-grid-95, .eh-mobile-grid-95, .eh-tablet-grid-95 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 10px;
}
...

显然，可以将这6个类压缩为一次定义。因此，我的想法是使用循环创建一个巨大的字符串，然后将.grid() mixin添加到其中：

@test: "";
.populateGridClasses4 (@index, @interval) when (@index > 0) {
    @num: @index * @interval;
    @ntest: ".eh-grid-@{num}, .eh-mobile-grid-@{num}, .eh-tablet-grid-@{num}";
    @test: "@{test}@{ntest}";
.populateGridClasses4(@index - 1, @interval);
}
.populateGridClasses4 (0, @interval) {}
.populateGridClasses4(20, 5);

("@{test}"){
    padding-left: 1px;
}

但是这给了我一个LESS错误LESS: Out of stack space。你有什么想法，如何创建这个巨大的字符串，以便我可以创建69个类，并只定义它们一次？当然是通过编程实现。

- EHorodyski

1个回答

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

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

- Martin Turjak · Accepted Answer

你可以尝试向mixin传递另一个属性...像这样，我在你的代码中添加了@t1到参数中，并在循环中定义了@t2，并将其传递。现在，你只会在一个循环步骤的范围内写入一个变量，而不是在递归中尝试重写相同的变量（与less不符）。所以这是你的代码，不应该再出现你提到的错误：

    @test: "";

    .populateGridClasses4 (@index, @interval, @t1) when (@index > 0) {
        @num: @index * @interval;
        @ntest: ".eh-grid-@{num}, .eh-mobile-grid-@{num}, .eh-tablet-grid-@{num}";
        @t2: ~"@{t1}@{ntest}";
    .populateGridClasses4(@index - 1, @interval,@t2);
    }

    .populateGridClasses4 (0, @interval,@t1) {}

    .populateGridClasses4(20, 5, @test);

    @{t2} {
        padding-left: 1px;
    }

另外，你需要使用“~”进行类插值，而不是将类名用引号括起来。

编辑：上面的方法只适用于1.3.3版本，在1.4版本中您需要进行一些调整才能使方法奏效。同时我注意到您连接字符串的方式没有在每个循环的类名之间添加逗号，因此我在这里添加了另一个步骤，这样应该可以在1.4和以前的LESS版本中正确执行。

    .populateGridClasses4(1,@num,@t1) {
        @test: ~"@{t1}, .eh-grid-@{num}, .eh-mobile-grid-@{num}, .eh-tablet-grid-@{num}";
    }

    .populateGridClasses4(@index, @interval, @t1) when (@index > 1) {
        @num: (@index * @interval);
        @t2: "@{t1}, .eh-grid-@{num}, .eh-mobile-grid-@{num}, .eh-tablet-grid-@{num}";
        .populateGridClasses4((@index - 1),@interval,@t2);
    }

    .populateGridClasses4(@index,@interval) {
        @num: (@index * @interval);
        @t2: ".eh-grid-@{num}, .eh-mobile-grid-@{num}, .eh-tablet-grid-@{num}";
       .populateGridClasses4((@index - 1), @interval, @t2);
    }

    .populateGridClasses4(20, 5);
    @{test} { padding-left: 1px; }

输出的CSS如下：

  .eh-grid-100, .eh-mobile-grid-100, .eh-tablet-grid-100, .eh-grid-95, .eh-mobile-grid-95, .eh-tablet-grid-95, .eh-grid-90, .eh-mobile-grid-90, .eh-tablet-grid-90, .eh-grid-85, .eh-mobile-grid-85, .eh-tablet-grid-85, .eh-grid-80, .eh-mobile-grid-80, .eh-tablet-grid-80, .eh-grid-75, .eh-mobile-grid-75, .eh-tablet-grid-75, .eh-grid-70, .eh-mobile-grid-70, .eh-tablet-grid-70, .eh-grid-65, .eh-mobile-grid-65, .eh-tablet-grid-65, .eh-grid-60, .eh-mobile-grid-60, .eh-tablet-grid-60, .eh-grid-55, .eh-mobile-grid-55, .eh-tablet-grid-55, .eh-grid-50, .eh-mobile-grid-50, .eh-tablet-grid-50, .eh-grid-45, .eh-mobile-grid-45, .eh-tablet-grid-45, .eh-grid-40, .eh-mobile-grid-40, .eh-tablet-grid-40, .eh-grid-35, .eh-mobile-grid-35, .eh-tablet-grid-35, .eh-grid-30, .eh-mobile-grid-30, .eh-tablet-grid-30, .eh-grid-25, .eh-mobile-grid-25, .eh-tablet-grid-25, .eh-grid-20, .eh-mobile-grid-20, .eh-tablet-grid-20, .eh-grid-15, .eh-mobile-grid-15, .eh-tablet-grid-15, .eh-grid-10, .eh-mobile-grid-10, .eh-tablet-grid-10, .eh-grid-5, .eh-mobile-grid-5, .eh-tablet-grid-5 {
    padding-left: 1px;
  }