CONCATENATE String trong LESS trong vòng lặp

Question

Tôi đang làm việc về chuyển đổi Unsemantic từ SASS để LESS và trong khi tôi đang xây dựng vòng lặp để tạo ra các lớp học của tôi:

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

// Tạo lưới trong phần ba .populateGridClasses (3, 33);

Nó tạo ra các lớp học như vậy:

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

Rõ ràng, mà có thể được condesnsed để tất cả 6 của những lớp được định nghĩa cùng một lúc. Vì vậy, ý tưởng của tôi là sử dụng vòng lặp để tạo ra một chuỗi khổng lồ mà tôi sau đó sẽ thêm .grid() mixin tới:

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

Nhưng điều đó mang lại cho tôi một lỗi LESS LESS: Out of stack space. Bất kỳ ý tưởng về cách tôi có thể tạo chuỗi lớn này để tôi có thể tạo 69 lớp và chỉ xác định chúng một lần? Dĩ nhiên, theo lập trình.

Answer 1

Bạn có thể thử chuyển thuộc tính khác đến mixin ... như thế này, nơi tôi đã thêm vào mã của bạn @ t1 vào đối số và xác định @ t2 trong vòng lặp và chuyển nó vào. Bây giờ bạn sẽ được ghi vào một biến chỉ trong phạm vi của một vòng lặp bước, và không cố gắng ghi đè lên cùng một biến trên một lần nữa trong đệ quy (không đồng ý với ít hơn). Vì vậy, đây là mã của bạn, không nên nhận được lỗi mà bạn đề cập nữa:

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

Bạn cũng cần sử dụng ~ để nội suy lớp, không trả về tên lớp giữa dấu ngoặc kép.

Chỉnh sửa: Ở trên sẽ chỉ hoạt động trong 1.3.3, nhưng đối với cách tiếp cận của bạn để làm việc trong 1.4, bạn cần chỉnh sửa nó một chút. Ngoài ra tôi nhận thấy rằng cách bạn đang tham gia vào chuỗi không thêm dấu phẩy giữa các tên lớp của mỗi vòng lặp, vì vậy tôi đã thêm một bước ở đây, điều này bây giờ sẽ làm điều đúng in1.4 và các phiên bản trước của 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; } 

đầu ra CSS là:

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