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         width: 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         width: 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-width: 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         width: $grid-width * $i + $grid-gutter * ($i - 1);
16         @extend %grid;
17     }
18 }

View Code