Sass控制命令

@if

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

@mixin blockOrHidden($boolean:true) {
  @if $boolean {    
      display: block;
    }
    @else {
      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这个数。

@for $i from 1 through 3 {
    .col-#{$i} { 1 / 3 * $i }
}

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

编译出来的CSS为:

.col-1 {
  width: 0.33333; 
}
.col-2 {
  width: 0.66667; 
}
.col-3 {
  width: 1; 
}


.item-1 {
  width: 0.33333; 
}
.item-2 {
  width: 0.66667;
}

实用例子:

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

使用继承，会自动合并。

@while循环

@while指令和其它语言中的while一样，条件为true时执行。

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

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

编译出来的CSS为:

.item-4 {
  width: 24px;
}

.item-3 {
  width: 23px;
}

.item-2 {
  width: 22px;
}

.item-1 {
  width: 21px;
}

@each循环

@each循环就是遍历一个列表，然后从列表中取出响应的值。

@each循环指令的形式:

@each $var in <list>

$var是变量名。<list>是列表值表达式。遍历$var在列表中做遍历，并且遍历与$var对应的样式块。

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