2-1 Sass的控制命令

@if

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

假设要控制一个元素隐藏或显示，我们就可以定义一个混合宏，通过 @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循环（上）

在制作网格系统的时候，大家应该对 .col1~.col12 这样的印象较深。在 CSS 中你需要一个一个去书写，但在 Sass 中，可以使用 @for 循环来完成。在 Sass 的 @for 循环中有两种方式：

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

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

这两个的区别是关键字 through 表示包括 end 这个数，而 to 则不包括 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;}

再来个 to 关键字的例子：

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

编译出来的 CSS:

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

@for循环 （下）

上一小节的那个实例几乎用不着，哈哈，所以其实是没什么营养的东西，只是帮助理解了原来 @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 through 方式换成 @for to:：

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

其最终编译出来的 CSS 代码和上例所编译出来的一模一样。

这两段 Sass 代码并无太多差别，只是 @for中的 <end> 取值不同。配合 through 的 <end> 值是 12，其遍历出来的终点值也是 12，和 <end> 值一样。配合 to 的 <end> 值是 13，其遍历出来的终点值是 12，就是 <end> 对就的值减去 1 。

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