2 1 Sass的控制命令

@if 指令是乙個 sassscript，它可以根據條件來處理樣式塊，如果條件為 true 返回乙個樣式塊，反之 false 返回另乙個樣式塊。在 sass 中除了 @if 之，還可以配合 @else if 和 @else 一起使用。

假設要控制乙個元素隱藏或顯示，我們就可以定義乙個混合巨集，通過 @if...@else... 來判斷傳進引數的值來控制 display 的值。如下所示：

//scss
@mixin blockorhidden($boolean:true) ";
display: block;
}@else ";
display: none;
}}.block 
.hidden

編譯出來的css:

.block

.hidden

在製作網格系統的時候，大家應該對 .col1~.col12 這樣的印象較深。在 css 中你需要乙個乙個去書寫，但在 sass 中，可以使用 @for 迴圈來完成。在 sass 的 @for 迴圈中有兩種方式：

@for $i from through @for $i from to

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

如下**，先來個使用 through 關鍵字的例子：

@for $i from 1 through 3  
}

編譯出來的 css:

.item-1

.item-2

.item-3

再來個 to 關鍵字的例子：

@for $i from 1 to 3  
}

編譯出來的 css:

.item-1

.item-2

//scss 
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;
%grid 
@for $i from 1 through 12 # 
}

編譯出來的 css:

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12

.span1

.span2

.span3

.span4

.span5

.span6

.span7

.span8

.span9

.span10

.span11

.span12

將上面的示例稍做修改，將 @for through 方式換成 @for to:：

//scss
@for $i from 1 to 13 # 
}

其最終編譯出來的 css **和上例所編譯出來的一模一樣。

這兩段 sass **並無太多差別，只是 @for中的取值不同。配合 through 的值是 12，其遍歷出來的終點值也是 12，和值一樣。配合 to 的值是 13，其遍歷出來的終點值是 12，就是對就的值減去 1 。

@while 指令也需要 sassscript 表示式（像其他指令一樣），並且會生成不同的樣式塊，直到表示式值為 false 時停止迴圈。這個和 @for 指令很相似，只要 @while 後面的條件為 true 就會執行。

這裡有乙個 @while 指令的簡單用例：

//scss
$types: 4;
$type-width: 20px;
@while $types > 0 
$types: $types - 1;
}

編譯出來的 css

.while-4

.while-3

.while-2

.while-1

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

@each 迴圈指令的形式：

@each $var in

如果你沒有接觸過列表，也不要緊，他也非常簡單。

在下面的例子中你可以看到，$var 就是乙個變數名，是乙個 sassscript 表示式，他將返回乙個列表值。變數 $var 會在列表中做遍歷，並且遍歷出與 $var 對應的樣式塊。

這有乙個 @each 指令的簡單示例：

$list: adam john wynn mason kuroir;//$list 就是乙個列表
@mixin author-images .png") no-repeat;}}
}.author-bio

編譯出 css:

.author-bio .photo-adam

.author-bio .photo-john

.author-bio .photo-wynn

.author-bio .photo-mason

.author-bio .photo-kuroir

2 1 Sass的控制命令

2 1 Sass的控制命令

Sass 的控制命令

Sass的控制命令（迴圈）

2 1 Sass的控制命令

2 1 Sass的控制命令

Sass 的控制命令

Sass的控制命令（迴圈）

相關推薦