@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 style2 .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 through @for $i from to$i 表示变量 start 表示起始值 end 表示结束值
这两个的区别是关键字 through 表示 包括end 这个数，而 to 则 不包括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 } 从 开始（此处示例是1），一直遍历到 （此处示例是3）。包括 的值。
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 } 循环从 开始，一直遍历循环到 结束。这种形式的循环只要碰到 就会停止循环（将不会遍历 值）。
@for循环（下）
@fo r 应用在网格系统生成各个格子 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 //SCSS2 $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
$var 就是一个 变量名 ， 是一个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 }
查看更多关于Sass的控制命令（循环）_html/css_WEB-ITnose的详细内容...