@each 循環(huán)就是去遍歷一個列表，然后從列表中取出對應(yīng)的值。

@each 循環(huán)指令的形式：

@each $var in <list>

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

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

這有一個 @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; }