2014-07-21 25 views
1

我有一個數組:與@import(在線)LESSCSS循環導致 「語法錯誤:遞歸變量定義」

@styles: amelia, cerulean, cosmo, cyborg, darkly, flatly, fonts, journal, lumen, readable, simplex, slate, spacelab, superhero, united, yeti; 

我有我的循環:

.loopStyles (@index) when (@index > 0) { 
    @name: extract(@styles, @index); 
    [email protected]{name} { 
    @import (inline) 'bower_components/bootswatch/@{name}/bootstrap.css'; 
    } 

    .loopStyles(@index - 1); 
} 

.loopStyles(length(@styles)); 

然而,這將引發一個錯誤: SyntaxError: Recursive variable definition for @index

如果我刪除了@import或者如果將import option reference更改爲lessinline以外的值,則工作得很好。

我想要實現的是一種方式來爲這些額外的樣式添加一個類,所以我寧願如果樣式表是內聯而不是引用的。

+0

這是在'@ import'語句中使用變量插值的[限制](http://lesscss.org/features/#variables-feature-import-statements)。錯誤消息當然不正確,它只是一個錯誤。恐怕目前沒有辦法在一個循環內做到這一點(你將不得不通過複製粘貼來重複所有的導入語句)。 –

+0

還要注意'(inline)'選項不會爲導入的樣式添加前綴,從而導致不正確的CSS。儘管如此,'(less)'選項應該可以做到。 –

回答

1

減文檔狀態「...只有在根或當前作用域中聲明的變量纔會被考慮,並且在查找變量時將只考慮當前文件和調用文件,這意味着此用法是通常僅限於在編譯過程中注入變量或在根文件開頭定義變量時。「

我試圖讓這個工作得到很多不相關的錯誤。

+0

它在最近的Less版本中有所改進。例如上面的代碼很可能會在v2.0和更高版本中工作(但我還沒有測試過)。儘管認識到這些東西總是需要一些額外的關心和理解,因爲[懶惰加載](http://lesscss.org/features/#variables-feature-lazy-loading),這一點很重要。 –