sass 控制指令

2022-08-31 08:30:11 字數 1576 閱讀 9500

控制指令

控制指令主要有：@if 、@for 、@while 、@each 四種，控制指令是一種高階功能， 主要與混合指令（mixin）配合使用 。尤其是在 compass 庫中 。

@if 跟 if 條件語句一樣，也可以跟多個 @else if ，用返回值來判斷輸出的**，當返回值為 true 時候輸出後面 中的**，當返回值是 false 時，表示該條件不成立，將逐條執行 @else if 宣告，如果全部不成立，最後執行 @else 宣告 。

如下**：

$name : cmy


p @else if $name == m  @else if $name == y  @else if $name == cmy @else 


}     


編譯為：


p
2 、@for在 sass 的 @for 迴圈中有兩種方式：

@for $cmy from through

@for $cmy from to

eg1：trough關鍵字 ，如下**：

@for $i from 1 through 3  


}編譯為:


.item-1 


.item-2 


.item-3
eg2：to關鍵字 ，如下**：

@for $i from 1 to 3  


}編譯為:


.item-1 


.item-2
3 、@while 迴圈@while 指令重複輸出格式直到表示式返回結果為 false 。這個和 @for 指令很相似，只要 @while 後面的結果為 true 就會執行。

$i:4;    //變數賦值用 ： 而不是想js一樣用 =


$i_width:100px;


@while $i>0


$i:$i-1;


}編譯為：


.item-1


.item-2


.item-3


.item-4
4 、@each@each 指令就是便利乙個值列表，然後將變數作用於值列表中每乙個專案，輸出結果 。

格式：$var  in  

$var　變數名

一連串的值，也就是值列表

eg：

@each $animal in puma, sea-slug, egret, salamander -icon .png');


}}編譯後：


.puma-icon 


.sea-slug-icon 


.egret-icon 


.salamander-icon

sass的控制指令

if 條件語句 判斷語句 for 迴圈語句 while 迴圈語句 each 迴圈語句 html結構 選擇器 多選一吧 邏輯運算子 if 表示式表示式 可以是關係運算 或者 邏輯運算 關係運算子 邏輯運算子 與 或 非 and 邏輯與 or 邏輯或 not 邏輯非 scss示例 max 101 min...

sass學習三 控制指令和表示式

1 if article編譯後 article 2 if else if else if返回除false 或null 之外的任何結果 a bbb p else if a bbb else 編譯後 p 3 for 注意拼接字串使用 如果是from to,10,20,30 for i from 1 th...

scss控制指令學習

1 if 混合巨集定義中 book.scss mixin blockorhidden boolean true debug warn,error display block else 插值 會執行 display none block hidden 執行 sass watch e sass book...