Sass 条件-循环语句

学习Sass中 @if...@else @for @while @each

一、条件判断 - @if @else

 　示例:　

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

　输出:

.block {
  display: block; }

.hidden {
  display: none; }

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

 　　输出:

.item-1 {
  width: 2em; }

.item-2 {
  width: 4em; }

.item-3 {
  width: 6em; }

 　　示例:

//使用 to 关键字的示例：
@for $i from 1 to 3 {
    .item-#{$i}#{1} {
         2em * $i;
    }
}

 　　输出:

.item-11 {
  width: 2em; }

.item-21 {
  width: 4em; }

　　例子:

/*
    for循环应用示例：
*/
$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 6 {
    .#{$grid-prefix}#{$i} {
         $grid-width * $i + $grid-gutter * ($i - 1);
        @extend %grid;
    }
}

　　输出结果:

/*
    for循环应用示例：
*/
.span1, .span2, .span3, .span4, .span5, .span6 {
  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; }

三、@while 循环

　　示例:

$types: 4;
$type- 20px;

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

　　输出:

/*
    while 循环
*/
.while-4 {
  width: 24px; }

.while-3 {
  width: 23px; }

.while-2 {
  width: 22px; }

.while-1 {
  width: 21px; }

四、@each 循环

　　@each 循环就是去遍历一个列表，然后从列表中取出对应的值。
      @each 循环指令的形式： @each $var in <list>

　　示例:

$list: adam john wynn mason kuroir;//$list 是一个列表
@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png");
        }
    }
}

.author-bio {
    @include author-images;
}

　　输出:

.author-bio .photo-adam {
  background: url("/images/avatars/adam.png"); }
.author-bio .photo-john {
  background: url("/images/avatars/john.png"); }
.author-bio .photo-wynn {
  background: url("/images/avatars/wynn.png"); }
.author-bio .photo-mason {
  background: url("/images/avatars/mason.png"); }
.author-bio .photo-kuroir {
  background: url("/images/avatars/kuroir.png"); }

学习 大漠老师 - Sass入门篇 笔记 http://www.w3cplus.com/