@for循环

在 Sass 的 @for 循环中有两种方式：

@for $i from <start> through <end>
@for $i from <start> to <end>

• $i 表示变量

• start 表示起始值

• end 表示结束值

这两个的区别是关键字 through 表示包括end 这个数，而 to 则不包括end 这个数。

//SCSS 
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;

%grid {
  float: left;
  margin-left: $grid-gutter / 2;
  margin-right: $grid-gutter / 2;
}

//through
@for $i from 1 through 3 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}

//to
@for $i from 1 to 3 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}

编译：.span1, .span2, .span3 {
  float: left;
  margin-left: 10px;
  margin-right: 10px; }

.span1 {
  width: 60px; }
.span2 {
  width: 140px; }
.span3 {
  width: 220px; }

.span1 {
  width: 60px; }
.span2 {
  width: 140px; }

@while循环

//SCSS
$types: 2;
$type-width: 20px;

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

编译：.while-2 {
  width: 22px;
}

.while-1 {
  width: 21px;
}

@each循环

遍历列表

格式：@each $var in <list>

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

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