Sass的控制命令（循环）
@if
@if指令是一个SassScript,它可以根据条件来处理样式块，如果条件为true返回一个样式块，反之false返回另一个样式块。在Sass中除了@if，还可以配合@else if和@else 一起使用。
1 $lte7: true;
2 $type: monster;
3 .ib{
4 display:inline-block;
5 @if $lte7 {
6 *display:inline;
7 *zoom:1;
8 }
9 }
10 p {
11 @if $type == ocean {
12 color: blue;
13 } @else if $type == matador {
14 color: red;
15 } @else if $type == monster {
16 color: green;
17 } @else {
18 color: black;
19 }
20 }
编译成CSS：
1 //css style
2 .ib{
3 display:inline-block;
4 *display:inline;
5 *zoom:1;
6 }
7 p {
8 color: green;
9 }
假设要控制一个元素隐藏或显示，我们就可以定义一个混合宏，通过 @if...@else... 来判断传进参数的值来控制 display 的值。如下所示：
1 //SCSS
2 @mixin blockOrHidden($boolean:true) {
3 @if $boolean {
4 @debug "$boolean is #{$boolean}";
5 display: block;
6 }
7 @else {
8 @debug "$boolean is #{$boolean}";
9 display: none;
10 }
11 }
12 .block {
13 @include blockOrHidden;
14 }
15 .hidden{
16 @include blockOrHidden(false);
17 }
编译出来的CSS:
1 .block {
2 display: block;
3 }
4 .hidden {
5 display: none;
6 }
@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关键字的例子：
1 @for $i from 1 through 3{
2 .item-#{$i} {width: 2em * $i;}
3 }
编译出来的 CSS:
1 .item-1 {
2 width: 2em;
3 }
4 .item-2 {
5 width: 4em;
6 }
7 .item-3 {
8 width: 6em;
9 }
从 <start> 开始（此处示例是1），一直遍历到 <end> （此处示例是3）。包括 <end> 的值。
to关键字的例子：
1 @for $i from 1 to 3{
2 .itme-#{$i} { width: 2 * $i;}
3 }
编译出来的 CSS:
1 .item-1 {
2 width: 2em;
3 }
4 .item-2 {
5 width: 4em;
6 }
循环从 <start> 开始，一直遍历循环到 <end> 结束。这种形式的循环只要碰到 <end> 就会停止循环（将不会遍历 <end> 值）。
@for循环（下）
@for应用在网格系统生成各个格子 class 的代码：
1 //SCSS
2 $grid-prefix: span !default;
3 $grid-width: 60px !default;
4 $grid-gutter: 20px !default;
5 %grid {
6 float: left;
7 margin-left: $grid-gutter / 2;
8 margin-right: $grid-gutter / 2;
9 }
10 @for $i from 1 through 12 {
11 .#{$grid-prefix}#{$i}{
12 width: $grid-width * $i + $grid-gutter * ($i - 1);
13 @extend %grid;
14 }
15 }
编译出来的 CSS:
1 .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
2 float: left;
3 margin-left: 10px;
4 margin-right: 10px;
5 }
6 .span1 {
7 width: 60px;
8 }
9 .span2 {
10 width: 140px;
11 }
12 .span3 {
13 width: 220px;
14 }
15 .span4 {
16 width: 300px;
17 }
18 .span5 {
19 width: 380px;
20 }
21 .span6 {
22 width: 460px;
23 }
24 .span7 {
25 width: 540px;
26 }
27 .span8 {
28 width: 620px;
29 }
30 .span9 {
31 width: 700px;
32 }
33 .span10 {
34 width: 780px;
35 }
36 .span11 {
37 width: 860px;
38 }
39 .span12 {
40 width: 940px;
41 }
@for 循环指令除了可以从小数值到大数值循环之外，还可以从大数值循环到小数值。而且两种形式都支持（递增或递减）。
@while循环
@while指令也需要SassScript表达式（像其他指令一样），并且会生成不同的样式块，直到表达式值为false时停止循环。这个和@for指令很相似，只要@while后面的条件为true就会执行。
@while指令简单用例：
1 //SCSS
2 $types: 4;
3 $type-width: 20px;
4 @while $types > 0 {
5 .while-#{$types}{
6 width: $type-width + $types;
7 }
8 $types: $types - 1;
9 }
编译出来的 CSS：
1 .while-4 {
2 width: 24px;
3 }
4 .while-3 {
5 width: 23px;
6 }
7 .while-2 {
8 width: 22px;
9 }
10 .while-1 {
11 width: 21px;
12 }
@each循环
@each循环就是去遍历一个列表，然后从列表中取出对应的值。
@each循环指令形式：
@each $var in <list>
$var 就是一个变量名， <list> 是一个SassScript表达式，他将返回一个列表值。变量 $var 会在列表中做出遍历，并且遍历出与 $var 对应的样式块。
这有一个 @each 指令的简单示例：
1 $list: adam john wynn mason kuroir;//$list 就是一个列表
2
3 @mixin author-images {
4 @each $author in $list {
5 .photo-#{$author} {
6 background: url("/images/avatars/#{$author}.png") no-repeat;
7 }
8 }
9 }
10
11 .author-bio {
12 @include author-images;
13 }
编译出CSS：
1 .author-bio .photo-adam {
2 background: url("/images/avatars/adam.png") no-repeat;
3 }
4 .author-bio .photo-john {
5 background: url("/images/avatars/john.png") no-repeat;
6 }
7 .author-bio .photo-wynn {
8 background: url("/images/avatars/wynn.png") no-repeat;
9 }
10 .author-bio .photo-mason {
11 background: url("/images/avatars/mason.png") no-repeat;
12 }
13 .author-bio .photo-kuroir {
14 background: url("/images/avatars/kuroir.png") no-repeat;
15 }
