Concatenate String in WENIGER in Schleife

Question

Ich arbeite an Unsemantic von SASS zu LESS Umwandlung und während ich den Aufbau der Schleife meine Klassen zu erstellen:

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

// Erstellen Sie die Gitter in Terzen .populateGridClasses (3, 33);

Es schafft die Klassen als so:

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

Offensichtlich dass condesnsed werden könnte, so dass alle 6 dieser Klassen auf einmal definiert sind. Also meine Idee ist, die Schleife zu verwenden, um einen riesigen String zu erstellen, die dann werde ich fügen Sie den .grid() mixin zu:

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

Aber das gibt mir eine weniger Fehler LESS: Out of stack space. Irgendeine Idee, wie ich diese massive Zeichenfolge erstellen kann, damit ich 69 Klassen erstellen und sie nur einmal definieren kann? Programmatisch natürlich.

Answer 1

Sie könnten versuchen, ein anderes Attribut an das Mixin zu übergeben ... wie hier, wo ich zu Ihrem Code das @ t1 zu den Argumenten hinzugefügt und das @ t2 in der Schleife definiert habe, und es weiterleiten. Jetzt schreiben Sie nur im Rahmen eines Schleifenschritts in eine Variable und versuchen nicht, dieselbe Variable in der Rekursion erneut zu überschreiben (stimmt nicht mit weniger überein). Das ist also der Code, die nicht die Fehlermeldung erhalten, sollten Sie nicht mehr erwähnen:

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

Darüber hinaus müssen Sie ~ für Klasse Interpolation verwenden, nicht die Klassennamen zwischen Anführungszeichen zurückzukehren.

Bearbeiten: Das obige funktioniert nur in 1.3.3, aber für Ihren Ansatz in 1.4 arbeiten müssen Sie es ein wenig zwicken. Außerdem habe ich bemerkt, dass die Art und Weise, wie du die Strings anfügst, keine Kommas zwischen Klassennamen jeder Schleife hinzugefügt hat, also habe ich hier einen weiteren Schritt hinzugefügt, das sollte jetzt das Richtige in 1.4 und früheren Versionen von LESS tun.

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

die Ausgabe CSS ist:

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