Sass 的控制命令

2021-08-07 02:39:55 字數 2712 閱讀 5207

一、sass 的函式指令

1、@if

@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

2、@for迴圈(上)

在製作網格系統的時候,大家應該對 .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

3、@for迴圈(下)

//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 。

4、@while迴圈

@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

5、@each迴圈

@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

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...