學習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二、 @for 迴圈.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 /*view code2for迴圈應用示例:
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/*2view codefor迴圈應用示例:3*/
4.span1, .span2, .span3, .span4, .span5, .span6 89
.span1
1112
.span2
1415
.span3
1718
.span4
2021
.span5
2324
.span6
三、@while 迴圈
示例:
1 $types: 4;view code2 $type-width: 20px;
34 @while $types >0
8 $types: $types - 1;
9 }
輸出:
1/*2view codewhile 迴圈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 是乙個列表view code2 @mixin author-images .png");
6}7}
8}910 .author-bio
輸出:
1view code.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語句執行後面的語句,若...