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} {  2em * $i; } }

编译出来的 CSS:

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

再来个 to 关键字的例子：

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

编译出来的 CSS:

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

 

@for循环 （下）

上一小节的那个实例几乎用不着，哈哈，所以其实是没什么营养的东西，只是帮助理解了原来 @for 是这么回事。怎么的也不能就这么忽悠大家啊，大家好不容易抽空看下文章，就这么点扯淡的东西怎么对得住呢。下面再来个营养级别的，@for应用在网格系统生成各个格子 class 的代码：

//SCSS $grid-prefix: span !default; $grid- 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}{  $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 {  60px; } .span2 {  140px; } .span3 {  220px; } .span4 {  300px; } .span5 {  380px; } .span6 {  460px; } .span7 {  540px; } .span8 {  620px; } .span9 {  700px; } .span10 {  780px; } .span11 {  860px; } .span12 {  940px; }

将上面的示例稍做修改，将 @for through 方式换成 @for to:：

//SCSS @for $i from 1 to 13 { .#{$grid-prefix}#{$i}{  $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- 20px; @while $types > 0 { .while-#{$types} {  $type-width + $types; } $types: $types - 1; }

编译出来的 CSS

.while-4 {  24px; } .while-3 {  23px; } .while-2 {  22px; } .while-1 {  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; }