SCSS @each

@each和@for指令類似，同樣可以用於迴圈輸出。

但是@each指令一般用於對於list或者map的遍歷輸出。

相關閱讀:

（1）.list可以參閱scss list列表一章節。

（2）.map可以參閱scss map物件一章節。

程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

編譯後的css程式碼如下:

[CSS] 純文字檢視 複製程式碼
.puma-icon {
  background-image: url("/images/puma.png"); 
}
.sea-slug-icon {
  background-image: url("/images/sea-slug.png"); 
}
.egret-icon {
  background-image: url("/images/egret.png"); 
}
.salamander-icon {
  background-image: url("/images/salamander.png"); 
}

下面再來看一個對於map遍歷的程式碼:

[Scss] 純文字檢視 複製程式碼
$ppl: ( one:bob, two:john, three:bill, four:mike );
@each $key, $usr in $ppl  {
  .#{$usr}-avatar {
    background-image: url('/img/#{$usr}.png');
  }
}

編譯後的css程式碼如下:

[CSS] 純文字檢視 複製程式碼
.bob-avatar {
  background-image: url("/img/bob.png"); 
}
.john-avatar {
  background-image: url("/img/john.png"); 
}
.bill-avatar {
  background-image: url("/img/bill.png"); 
}
.mike-avatar {
  background-image: url("/img/mike.png"); 
}

程式碼非常簡單，本文不再進行過多介紹，如有疑問可以在文章底部留言。