如何使用循環創建以逗號分隔的值，而不在最後加上逗號？

Question

我使用@for創建多個箱陰影參數：

.myclass { 

    $bxsw : ""; 
    @for $i from 1 through 10 { 
     $bxsw : $bxsw + " -" + $i + "px -" + $i + "px " + brown + ","; 
    } 

    box-shadow: #{$bxsw}; 

} 

這給了我：

.myclass { 
    box-shadow: -1px -1px brown, -2px -2px brown, -3px -3px brown, -4px -4px brown, -5px -5px brown, -6px -6px brown, -7px -7px brown, -8px -8px brown, -9px -9px brown, -10px -10px brown,; 
} 

注意，最後多餘的逗號？這會導致Firefox不顯示框陰影。有刪除最後一個逗號的程序化方法嗎？

Answer 1

最簡單的方法是將追加到一個逗號分隔的列表。

.myclass { 
    $bxsw :(); 
    @for $i from 1 through 10 { 
     $bxsw : append($bxsw, $i * -1px $i * -1px brown, comma); 
    } 

    box-shadow: $bxsw; 
} 

http://sassmeister.com/gist/7b8221953c7ca9813aea

Answer 2

方法＃1：一種選擇是爲$bxsw設置基準值，然後從2迭代循環：

.myclass { 
    $bxsw : "-1px -1px brown"; 
    @for $i from 2 through 10 { 
     $bxsw : $bxsw + ", -" + $i + "px -" + $i + "px " + brown; 
    } 

    box-shadow: #{$bxsw}; 
} 

方法＃2：另一種選擇將被檢查，如果$bxsw是不爲空，以追加逗號：

.myclass { 
    $bxsw : ""; 
    @for $i from 1 through 10 { 
     @if ($bxsw != "") { $bxsw: $bxsw + ", "; } 
     $bxsw : $bxsw + "-" + $i + "px -" + $i + "px " + brown; 
    } 

    box-shadow: #{$bxsw}; 
} 

方法3：同時，我們也可以檢查，如果當前迭代次數是最後一個與否：

.myclass { 
    $bxsw: ""; $from: 1; $to: 10; 

    @for $i from $from through $to { 
     $bxsw : $bxsw + "-" + $i + "px -" + $i + "px " + brown; 
     @if ($i < $to) { $bxsw: $bxsw + ", "; } 
    } 

    box-shadow: #{$bxsw}; 
}