Sass 條件 迴圈語句

學習sass中 @if...@else @for @while @each

一、條件判斷 - @if @else

示例:　

1

@mixin blockorhidden($boolean:true)";
4display: block;5}
6 @else";
8display: none;9}
10}1112
.block 
1516
.hidden 

1

.block 34
.hidden 

兩種方式:

@for $i from through

@for $i from to

$i 表示變數； start 表示起始值； end 表示結束值；

這兩個的區別是關鍵字 through 表示包括 end 這個數，而 to 則不包括 end 這個數。

示例:

1 //使用 through 關鍵字的示例：

2 @for $i from 1 through 3 
6 }

1

.item-1 34
.item-2 67
.item-3 

1 //使用 to 關鍵字的示例：

2 @for $i from 1 to 3# 
6 }

1

.item-11 34
.item-21 

1 /*

2for迴圈應用示例：
3 */
4 $grid-prefix: span !default;
5 $grid-width: 60px !default;
6 $grid-gutter: 20px !default;
78 %grid 
13 @for $i from 1 through 6# 
18 }

輸出結果:

1/*2

for迴圈應用示例：3*/
4.span1, .span2, .span3, .span4, .span5, .span6 89
.span1 
1112
.span2 
1415
.span3 
1718
.span4 
2021
.span5 
2324
.span6 

三、@while 迴圈

示例:

1 $types: 4;

2 $type-width: 20px;
34 @while $types >0 
8 $types: $types - 1;
9 }

輸出:

1/*2

while 迴圈3*/
4.while-4 67
.while-3 910
.while-2 
1213
.while-1 

四、@each 迴圈

@each 迴圈就是去遍歷乙個列表，然後從列表中取出對應的值。

@each 迴圈指令的形式： @each $var in

示例:

1 $list: adam john wynn mason kuroir;//$list 是乙個列表

2 @mixin author-images .png");
6}7}
8}910 .author-bio 

輸出:

1

.author-bio .photo-adam 
3.author-bio .photo-john 
5.author-bio .photo-wynn 
7.author-bio .photo-mason 
9.author-bio .photo-kuroir 

學習 大漠老師 - sass入門篇 筆記

sass中的迴圈判斷條件語句

lte7 true default 是否相容ie6,7 inline block ie6 7 display inline zoom 1 mixin inline block 既然有 if，那肯定有 else啊 filter false default 是否開啟ie濾鏡 背景色半透明 mixin b...

條件語句 迴圈語句

1 switch case switch中的比較是用的equals，而不是 switch中只能使用byte short int char string 列舉型別。不能使用long flaot double 各個case標籤不必連續 也不按特定順序排列，default標籤可位於switch case結...

條件語句和迴圈語句

條件語句 if語句有三種用法 1.if 表示式 如果表示式的值為真，則執行括號內的復合語句 2.if 表示式 else 如果表示式的值為真，則執行語句1，否則執行語句2 3.if 表示式 else if else if else 如果表示式的值為真，則執行對應的語句然後跳出if語句執行後面的語句，若...