一、sass 的函式指令
1、@if
@if 指令是乙個 sassscript,它可以根據條件來處理樣式塊,如果條件為 true 返回乙個樣式塊,反之 false 返回另乙個樣式塊。在 sass 中除了 @if 之,還可以配合 @else if 和 @else 一起使用。
假設要控制乙個元素隱藏或顯示,我們就可以定義乙個混合巨集,通過 @if...@else... 來判斷傳進引數的值來控制 display 的值。如下所示:
//scss編譯出來的css:@mixin blockorhidden($boolean:true) ";
display: block;
}@else ";
display: none;
}}.block
.hidden
.block2、@for迴圈(上).hidden
在製作網格系統的時候,大家應該對 .col1~.col12 這樣的印象較深。在 css 中你需要乙個乙個去書寫,但在 sass 中,可以使用 @for 迴圈來完成。在 sass 的 @for 迴圈中有兩種方式:
@for $i from through這兩個的區別是關鍵字 through 表示包括 end 這個數,而 to 則不包括 end 這個數。@for $i from to
如下**,先來個使用 through 關鍵字的例子:
@for $i from 1 through 3編譯出來的 css:}
.item-13、@for迴圈(下).item-2
.item-3
//scss編譯出來的 css:$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;
%grid
@for $i from 1 through
12 #
}
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12將上面的示例稍做修改,將 @for through 方式換成 @for to::.span1
.span2
.span3
.span4
.span5
.span6
.span7
.span8
.span9
.span10
.span11
.span12
//scss其最終編譯出來的 css **和上例所編譯出來的一模一樣。@for $i from 1 to
13 #
}
這兩段 sass **並無太多差別,只是 @for中的 取值不同。配合 through 的 值是 12,其遍歷出來的終點值也是 12,和 值一樣。配合 to 的 值是 13,其遍歷出來的終點值是 12,就是 對就的值減去 1 。
4、@while迴圈
@while 指令也需要 sassscript 表示式(像其他指令一樣),並且會生成不同的樣式塊,直到表示式值為 false 時停止迴圈。這個和 @for 指令很相似,只要 @while 後面的條件為 true 就會執行。
這裡有乙個 @while 指令的簡單用例:
//scss編譯出來的 css$types: 4;
$type-width: 20px;
@while
$types > 0
$types: $types - 1;
}
.while-45、@each迴圈.while-3
.while-2
.while-1
@each 迴圈就是去遍歷乙個列表,然後從列表中取出對應的值。
@each 迴圈指令的形式:
@each $var in如果你沒有接觸過列表,也不要緊,他也非常簡單。
在下面的例子中你可以看到,$var 就是乙個變數名,是乙個 sassscript 表示式,他將返回乙個列表值。變數 $var 會在列表中做遍歷,並且遍歷出與 $var 對應的樣式塊。
這有乙個 @each 指令的簡單示例:
$list: adam john wynn mason kuroir;//$list 就是乙個列表編譯出 css:@mixin author-images .png") no-repeat;}}
}.author-bio
.author-bio .photo-adam.author-bio .photo-john
.author-bio .photo-wynn
.author-bio .photo-mason
.author-bio .photo-kuroir
Sass的控制命令(迴圈)
if if指令是乙個sassscript,它可以根據條件來處理樣式塊,如果條件為true返回乙個樣式塊,反之false返回另乙個樣式塊。在sass中除了 if,還可以配合 else if和 else一起使用。1 lte7 true 2 type monster 3.ib9 10p else if t...
2 1 Sass的控制命令
if if 指令是乙個 sassscript,它可以根據條件來處理樣式塊,如果條件為 true 返回乙個樣式塊,反之 false 返回另乙個樣式塊。在 sass 中除了 if 之,還可以配合 else if 和 else 一起使用。假設要控制乙個元素隱藏或顯示,我們就可以定義乙個混合巨集,通過 if...
2 1 Sass的控制命令
if 指令是乙個 sassscript,它可以根據條件來處理樣式塊,如果條件為 true 返回乙個樣式塊,反之 false 返回另乙個樣式塊。在 sass 中除了 if 之,還可以配合 else if 和 else 一起使用。假設要控制乙個元素隱藏或顯示,我們就可以定義乙個混合巨集,通過 if.el...