在 LESS 循环中连接字符串

Question

我正在努力将 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: Out of stack space。关于如何创建这个庞大的字符串以便我可以创建 69 个类并且只定义一次的任何想法？当然是程序化的。

Answer 1

您可以尝试将另一个属性传递给 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;
  }