Sass 条件-循环语句

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

一、条件判断 - @if @else

　示例:　

 1 @mixin blockOrHidden($boolean:true){
 2     @if $boolean {
 3         @debug "$boolean is #{$boolean}";
 4         display: block;
 5     }
 6     @else {
 7         @debug "$boolean is #{$boolean}";
 8         display: none;
 9     }
10 }
11 
12 .block {
13     @include blockOrHidden;//默认
14 }
15 
16 .hidden {
17     @include blockOrHidden(false);//为假
18 }

　输出:

1 .block {
2   display: block; }
3 
4 .hidden {
5   display: none; }

二、 @for 循环

　　两种方式:
   　　@for $i from <start> through <end>
   　　@for $i from <start> to <end>
   　　$i 表示变量； start 表示起始值； end 表示结束值；

   　　这两个的区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。
　　示例:

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

　　输出:

1 .item-1 {
2   width: 2em; }
3 
4 .item-2 {
5   width: 4em; }
6 
7 .item-3 {
8   width: 6em; }

　　示例:

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

　　输出:

1 .item-11 {
2   width: 2em; }
3 
4 .item-21 {
5   width: 4em; }

　　例子:

 1 /*
 2     for循环应用示例：
 3 */
 4 $grid-prefix: span !default;
 5 $grid- 60px !default;
 6 $grid-gutter: 20px !default;
 7 
 8 %grid {
 9     float: left;
10     margin-left: $grid-gutter / 2;
11     margin-right: $grid-gutter /2;
12 }
13 @for $i from 1 through 6 {
14     .#{$grid-prefix}#{$i} {
15          $grid-width * $i + $grid-gutter * ($i - 1);
16         @extend %grid;
17     }
18 }

View Code

　　输出结果:

 1 /*
 2     for循环应用示例：
 3 */
 4 .span1, .span2, .span3, .span4, .span5, .span6 {
 5   float: left;
 6   margin-left: 10px;
 7   margin-right: 10px; }
 8 
 9 .span1 {
10   width: 60px; }
11 
12 .span2 {
13   width: 140px; }
14 
15 .span3 {
16   width: 220px; }
17 
18 .span4 {
19   width: 300px; }
20 
21 .span5 {
22   width: 380px; }
23 
24 .span6 {
25   width: 460px; }

View Code

三、@while 循环

　　示例:

1 $types: 4;
2 $type- 20px;
3 
4 @while $types > 0 {
5     .while-#{$types} {
6          $type-width + $types;
7     }
8     $types: $types - 1;
9 }

View Code

　　输出:

 1 /*
 2     while 循环
 3 */
 4 .while-4 {
 5   width: 24px; }
 6 
 7 .while-3 {
 8   width: 23px; }
 9 
10 .while-2 {
11   width: 22px; }
12 
13 .while-1 {
14   width: 21px; }

View Code

四、@each 循环

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

　　示例:

 1 $list: adam john wynn mason kuroir;//$list 是一个列表
 2 @mixin author-images {
 3     @each $author in $list {
 4         .photo-#{$author} {
 5             background: url("/images/avatars/#{$author}.png");
 6         }
 7     }
 8 }
 9 
10 .author-bio {
11     @include author-images;
12 }

View Code

　　输出:

 1 .author-bio .photo-adam {
 2   background: url("/images/avatars/adam.png"); }
 3 .author-bio .photo-john {
 4   background: url("/images/avatars/john.png"); }
 5 .author-bio .photo-wynn {
 6   background: url("/images/avatars/wynn.png"); }
 7 .author-bio .photo-mason {
 8   background: url("/images/avatars/mason.png"); }
 9 .author-bio .photo-kuroir {
10   background: url("/images/avatars/kuroir.png"); }

View Code

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