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