Sass循环样式（2）

$types: 4;
$type-width: 20px;

@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}

.while-4 {width: 24px;}

.while-3 {width: 23px;}

.while-2 {width: 22px;}

.while-1 {width: 21px;}

@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}

.item-1 {width: 2em;}

.item-2 {width: 4em;}

$list: adam john wynn mason kuroir;
@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}
.author-bio {
    @include author-images;
}

.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; }