減去css：最大的調用堆棧大小，循環迴路

Question

所以我想少建構我的網格。 我使用較少頁面上描述的列方法（http://lesscss.org/features/#loops-feature）。但是當我運行它時出現錯誤。 54

Error: Maximum call stack size exceeded in file /assets/less/grid.less line no. 54

行是我發起的環.loop(@grids, (@grids + 1));

如果我刪除.generate-offset(@n, @tag, (@i + 1));的混入我得到另一個錯誤內。

Error: Cannot read property 'denominator' of undefined in file/assets/less/grid.less line no. 54

然而，當我手動運行混入我的工作就像一個魅力。 例如

.generate-columns(2, xs); 
.generate-offset(2, xs); 

如果我運行.loop混入沒有.generate-columns和.generate-offset混入它的工作原理，以及和運行的3倍預期（由於3個斷點）。

任何想法爲什麼我結合兩者時會出現這些錯誤？

@prefixes: 'sm', 'md', 'lg'; 
@breakpoints: '0', '100rem', '140rem'; 
@columns: '2','6','12'; 

.generate-offset(@n, @tag, @i: 1) when (@i < @n) { 
    .offset--@{tag}-@{i} { 
    margin-left: (@i * 100%/@n); 
    } 
    .generate-offset(@n, @tag, (@i + 1)); 
} 

// Grid loops 

.loop(@index, @count) when (@index > 0){ 
    // extract variables 
    @current: (@count - @index); 
    @prefix: e(extract(@prefixes, @current)); 
    @breakpoint: e(extract(@breakpoints, @current)); 
    @column: e(extract(@columns, @current)); 

    @media (min-width: @breakpoint) { 
     .generate-columns(@column, @prefix); 
     .generate-offset(@column, @prefix); 
    } 

    .loop ((@index - 1), @count); 
} 

// run 
@grids: length(@breakpoints); 
.loop(@grids, (@grids + 1)); 

SOLUTION：

萬一有人有同樣的問題，我的最終代碼現在看起來是這樣。

@prefixes: sm, md, lg; 
@breakpoints: 0, 100rem, 140rem; 
@columns: 2,6,12; 
// ******************** 
// Column Mixin 
// 
.generate-columns(@n, @tag, @i: 1) when (@i =< @n) { 
    .column--@{tag}-@{i} { 
    flex: 0 0 (@i * 100%/@n); 
    } 
    .generate-columns(@n, @tag, (@i + 1)); 
} 
// Offset Mixin 
// 
.generate-offset(@col, @tag, @i: 1) when (@i < @col) { 
    .offset--@{tag}-@{i} { 
    margin-left: (@i * 100%/@col); 
    } 
    .generate-offset(@col, @tag, (@i + 1)); 
} 
// Make grid 
// 
.make-grid(@breakpoint, @cols, @pref) { 
    & when(@breakpoint > 0){ 
    @media(min-width: @breakpoint) { 
     .generate-columns(@cols, @pref); 
     .generate-offset(@cols, @pref); 
    } 
    } 
    & when(@breakpoint = 0){ 
    .generate-columns(@cols, @pref); 
    .generate-offset(@cols, @pref); 
    } 
} 
// Run make-grid for every breakpoint 
// 
.loop(@index) when (@index > 0){ 
    // run loop first to change order 
    .loop ((@index - 1)); 

    .make-grid(
     extract(@breakpoints, @index), 
     extract(@columns, @index), 
     extract(@prefixes, @index) 
    ); 
} 
.loop(length(@breakpoints)); 

Answer 1

你的情況的問題是因爲e()（或~()）函數的輸出始終是一個串，你不能使用它通過添加以下行來執行數學運算或比較等，您可以驗證這一點在您的@media查詢中（並註釋掉mixin調用）。

columnIsNumber: isnumber(@column); 
/* with your current method this will always return false */ 

爲了解決這個問題，你應該避免使用e()功能，你想在執行數學運算的任何變量。舉例來說，你可以改變你的mixin是像下面（指對所做的更改內部註釋）：

@prefixes: 'sm', 'md', 'lg'; 
@breakpoints: '0', '100rem', '140rem'; 
@columns: 2, 6, 12; /* note the exclusion of quotes */ 

.generate-offset(@n, @tag, @i: 1) when (@i < @n) { 
    .offset--@{tag}-@{i} { 
    margin-left: (@i * 100%/@n); 
    } 
    .generate-offset(@n, @tag, (@i + 1)); 
} 

// Grid loops 

.loop(@index, @count) when (@index > 0){ 
    // extract variables 
    @current: (@count - @index); 
    @breakpoint: e(extract(@breakpoints, @current)); 
    @column: extract(@columns, @current); /* avoid using e() */ 
    @prefix: e(extract(@prefixes, @current)); 
    @media (min-width: @breakpoint) { 
     .generate-columns(@column, @prefix); 
     /*columnIsNumber: isnumber(@column);*/ 
     .generate-offset(@column, @prefix); 
    } 

    .loop ((@index - 1), @count); 
} 

// run 
@grids: length(@breakpoints); 
.loop(@grids, (@grids + 1)); 

---

中，當然你可以用自己的代碼做（與變量聲明和e()報價在mixin中）使用一點JS評估。但我不會推薦這種方法，因爲這隻會增加我認爲的複雜性。

@media (min-width: @breakpoint) { 
    .generate-columns(@column, @prefix); 
    @col: `function(){return @{column}}()`; /* JS evaluation */ 
    /*columnIsNumber: isnumber(@col);*/ 
    .generate-offset(@col, @prefix); 
} 

或

@media (min-width: @breakpoint) { 
    .generate-columns(@column, @prefix); 
    @col: `function(){return parseInt(@{column},10)}()`; /* JS evaluation */ 
    /*columnIsNumber: isnumber(@col);*/ 
    .generate-offset(@col, @prefix); 
}