Sass的控制命令（循环）

@if
@if指令是一个SassScript,它可以根据条件来处理样式块，如果条件为true返回一个样式块，反之false返回另一个样式块。在Sass中除了@if，还可以配合@else if和@else 一起使用。

 $lte7: true;
 $type: monster;
 .ib{
     display:inline-block;
     @if $lte7 {
         *display:inline;
         *zoom:;
     }
 }
 p {
     @if $type == ocean {
         color: blue;
     } @else if $type == matador {
         color: red;
     } @else if $type == monster {
         color: green;
     } @else {
         color: black;
     }
 }

编译成CSS：

 //css style
 .ib{
     display:inline-block;
     *display:inline;
     *zoom:;
 }
 p {
     color: green;
 }

假设要控制一个元素隐藏或显示，我们就可以定义一个混合宏，通过 @if...@else... 来判断传进参数的值来控制 display 的值。如下所示：

 //SCSS
 @mixin blockOrHidden($boolean:true) {
     @if $boolean {
         @debug "$boolean is #{$boolean}";
         display: block;
     }
     @else {
         @debug "$boolean is #{$boolean}";
         display: none;
     }
 }
 .block {
     @include blockOrHidden;
 }
 .hidden{
     @include blockOrHidden(false);
 }

编译出来的CSS:

 .block {
     display: block;
 }
 .hidden {
     display: none;
 }

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

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

• $i 表示变量
• start 表示起始值
• end 表示结束值

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

从 <start> 开始循环，到 <end> 结束
如下代码，使用through关键字的例子：

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

编译出来的 CSS:

 .item-1 {
     width: 2em;
 }
 .item-2 {
     width: 4em;
 }
 .item-3 {
     width: 6em;
 }

从 <start> 开始（此处示例是1），一直遍历到 <end> （此处示例是3）。包括 <end> 的值。

to关键字的例子：

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

编译出来的 CSS:

 .item-1 {
     width: 2em;
 }
 .item-2 {
     width: 4em;
 }

循环从 <start> 开始，一直遍历循环到 <end> 结束。这种形式的循环只要碰到 <end> 就会停止循环（将不会遍历 <end> 值）。

@for循环（下）

@for应用在网格系统生成各个格子 class 的代码：

 //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;
 }
 @for $i from 1 through 12 {
     .#{$grid-prefix}#{$i}{
         width: $grid-width * $i + $grid-gutter * ($i - 1);
         @extend %grid;
     }
 }

编译出来的 CSS:

 .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
     float: left;
     margin-left: 10px;
     margin-right: 10px;
 }
 .span1 {
     width: 60px;
 }
 .span2 {
     width: 140px;
 }
 .span3 {
     width: 220px;
 }
 .span4 {
     width: 300px;
 }
 .span5 {
     width: 380px;
 }
 .span6 {
     width: 460px;
 }
 .span7 {
     width: 540px;
 }
 .span8 {
     width: 620px;
 }
 .span9 {
     width: 700px;
 }
 .span10 {
     width: 780px;
 }
 .span11 {
     width: 860px;
 }
 .span12 {
     width: 940px;
 }

 @for 循环指令除了可以从小数值到大数值循环之外，还可以从大数值循环到小数值。而且两种形式都支持（递增或递减）。

@while循环
@while指令也需要SassScript表达式（像其他指令一样），并且会生成不同的样式块，直到表达式值为false时停止循环。这个和@for指令很相似，只要@while后面的条件为true就会执行。
@while指令简单用例：

 //SCSS
 $types: 4;
 $type-width: 20px;
 @while $types > 0 {
     .while-#{$types}{
         width: $type-width + $types;
     }
     $types: $types - 1;
 }

编译出来的 CSS：

 .while-4 {
     width: 24px;
 }
 .while-3 {
     width: 23px;
 }
 .while-2 {
     width: 22px;
 }
 .while-1 {
     width: 21px;
 }

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