String concatenation in LESS in a loop

Question

I am working on Unsemantic conversion from SASS to LESS and while I'm building a loop to create my classes:

.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); 

// Create grids in thirds .populateGridClasses (3, 33);

It creates classes as follows:

 .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; } ... 

Obviously, this can be reduced, so that all 6 of these classes are defined immediately. So my idea is to use a loop to create a giant row, after which I will add .grid() mixin to:

 @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; } 

But this gives me the error LESS LESS: Out of stack space . Any idea on how I can create this massive string, so I can create 69 classes and define them only once? Programmatically, of course.

Answer 1

You can try passing another attribute to mixin ... like this, where I added arguments to my @ t1 code and define @ t2 in a loop and pass it. Now you will write a variable only within one step of the cycle, and not try to rewrite the same variable again in recursion (do not agree with the smaller one). Thus, this is your code, which should not cause an error, which you already mention:

  @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; } 

You also need to use ~ to interpolate classes, rather than returning class names between quotation marks.

Edit: The above will only work in 1.3.3, but for your approach to working in 1.4 you need to tweak it a bit. I also noticed that the way you joined the strings did not add commas between the class names of each loop, so I added one more step here, now it should do the right thing in 1.4 and previous versions of 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 output:

  .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; }