@each循環

@each 循環就是去遍歷一個列表，然後從列表中取出對應的值。

@each 循環指令的形式：

@each $var in <list>

如果你沒有接觸過列表，也不要緊，他也非常簡單。

在下面的例子中你可以看到，$var 就是一個變量名，<list> 是一個SassScript 表達式，他將返回一個列表值。變量$var 會在列表中做遍歷，並且遍歷出與$var 對應的樣式塊。

這有一個@each 指令的簡單示例：

$list: adam john wynn mason kuroir;//$list 就是一个列表

@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}

.author-bio {
    @include author-images;
}

編譯出CSS:

.author-bio .photo-adam {
  background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john {
  background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn {
  background: url("/images/avatars/wynn.png") no-repeat; }
.author-bio .photo-mason {
  background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir {
  background: url("/images/avatars/kuroir.png") no-repeat; }