Sass中使用@each循環

項目中須要實現這樣一個效果（五光十色的 CheckBox）：

1. 首先建立好一個模板：

2. 添加樣式，若是不用循環也能實現：

3. 不過 Sass 爲咱們提供了更合適的寫法。由圖片可知咱們須要爲七個 CheckBox 添加不一樣的類名併爲它們內部的元素添加不一樣的背景顏色（.md-container 和 .md-icon 均爲 Angular Material 解析而來，改變 CheckBox 的背景顏色可經過改變 .md-icon 的背景顏色來實現），能夠在 Sass 中用數組 $class-name-list 存放全部類名，用數組 $class-dialog-colors-list 存放全部顏色值，而後用一個循環便可爲全部 CheckBox 添加不一樣的背景顏色：

 

 

 總結：剛開始有一種寫法是把每一個顏色值賦給一個變量，而後經過字符串拼接的方法拼出這個變量：background-color: unquote('$')#{$color}Background（好比定義其中一個顏色值變量爲$orangeBackground: #f5a623;），可是這樣並無成功，解析的結果在瀏覽器中是這樣的「background-color：$orangeBackground」。