sass学习--sass的控制命令（进阶篇）

1.@if

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

可以定义一个混合宏，来控制一个元素隐藏或显示，通过 @if…@else… 来判断传进参数的值来控制 display 的值。

//SCSS
@mixin blockOrHidden($boolean:true) {
  @if $boolean {
    @debug "$boolean is #{$boolean}";//debug输出信息
      display: block;
    }
    @else {
      @debug "$boolean is #{$boolean}";
      display: none;
    }
}

.block {
  @include blockOrHidden;
}

.hidden{
  @include blockOrHidden(false);
}

2.@for

在 Sass 的 @for 循环中有两种方式：

@for $i from start through end

@for $i from start to end

区别: through 表示包括 end 这个数，而 to 则不包括 end 这个数。

//for循环测试：@for $i from start through end

@for $i from 1 through 3{
  .item-#{$i}{
    width:2em*$i;
  }
}
//for循环测试@for $i from start to end

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

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

3.@while

@while 指令也需要 SassScript 表达式，并且会生成不同的样式块，直到表达式值为 false 时停止循环。和 @for 指令很相似，只要 @while 后面的条件为 true 就会执行。

//SCSS
$types: 4;
$type-width: 20px;

@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}

4.@each

循环指令的形式：@each $var in list

$var 就是一个变量名，<list> 是一个 SassScript 表达式，他将返回一个列表值。变量 $var 会在列表中做遍历，并且遍历出与 $var 对应的样式块。

/*@each实例*/

$list: aaa john tom mason kola;//$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; }

总结：主要是整理了下sass的控制命令：@if、@for、@while、@each四个！以及简单的实例演示！相信根据实战情况，这些命令都能很好地帮你一把吧！快！以面向对象是思想去高效创造精彩的css吧！