如何創建少輸出列表？

我想創建一個從另一個列表計算出來的列表。例如，如果我有一個像1,2,3,4這樣的列表...那麼輸出結果必須是10,20,30,40 ...有沒有其他方法可以從另一個列表中創建列表？請參考下面的代碼。如何創建少輸出列表？

@input: 1,2,3,4; 
.for(@array) when (default()) {.for-impl_(length(@array))} 
.for-impl_(@i) when (@i > 1) {.for-impl_((@i - 1))} 
.for-impl_(@i) when (@i > 0) {.-each(extract(@array, @i), @i)} 

.create-list(@input){ 
    .for(@input); .-each(@value, @a) { 
    [email protected]{a}(@a) { // Create dynamic mixin based on input list 
     @[email protected]{a}: @a * 10; // Create dynamic variable to store each calc 
    } 
    } 
} 
.create-list(@input); 

.loop(@count) when (@count > 0){ 
    @prev: @count - 1; 
    .loop(@prev); 
    .first() when (@count = 1){ 
    [email protected]{count}(); // call first mixin which created already 
    @[email protected]{count}: @[email protected]{count} // Store the result in another dynamic var 
    } 
    .first() when not (@count = 1){ 
    [email protected]{count}(); 
    @[email protected]{count}: @[email protected]{prev}, @[email protected]{count}; // join prev and current result 
    } 
    .first(); 
} 
.loop(4);

上面的實現類似我以下的樣子。

.a1(){ 
    @o1: #fff; 
} 

.a2(){ 
    @o2: #aaa; 
} 

.a3(){ 
    @o3: #ccc; 
} 

.loop(@counter) when (@counter > 0) { 
    .loop((@counter - 1)); 
    .a1(); 
    @out1: @o1; 
    .a2(); 
    @out2: @out1, @o2; 
    .a3(); 
    @out: @out2, @o3; 
    div{ 
    colors: @out; 
    } 
} 
.loop(1);

並且輸出是#fff，#aaa，＃ccc。

來源

2015-09-19 Yahwe Raj

您將通過將每個循環迭代的連接結果傳遞給下一個迭代來創建修改的「列表」，因此最終迭代定義實際結果。例如。（只是說明W/O它採用你的用例的原理）：

// usage: 
@input: 1, 2, 3, 4; 

result { 
    .modify-list(@input); 
    result: @result; 
} 

// impl: 

.modify-list(@list) { 
    @n: length(@list); 
    .-(@n, extract(@list, @n) * 10); 
    .-(@i, @r) when (@i > 1) { 
     .-(@i - 1; extract(@list, @i - 1) * 10, @r); 
    } 
    .-(1, @r) {@result: @r} 
}

Demo

技術上這個代碼不創建一個維列表（即結果沒有真正等於@result: 10, 20, 30, 40; ），但由於在最終的CSS它呈現相同，它會工作得很好。

而且假設你原來的用例是How to apply less functions to gradient colors?，你不真的需要這樣的代碼（即它是一個「XY問題」和而不是產生新列表中的新變量，直接生成相應的梯度值將會更簡單，更具可讀性。請參閱上述問題的註釋中的鏈接答案）。

來源

2015-10-01 22:32:30

如何創建少輸出列表？

回答

相關問題