本節我們來學習 Sass 中的條件語句，可以使用
@if
指令來判斷條件表示式的值，然後控制輸出。Sass 中的
@if
、
@else
等指令和 JS 中的
if/else
類似。
@if 指令
當
@if
指令後面的表示式返回值為
true
時，輸出花括號中的程式碼，為
false
則不輸出。
示例：
下面例子中，定義了一個變數
$num
，使用
@if
指令來判斷變數的值，當變數值為 1 時，輸出字型顏色為
#ee78da
，當變數值為 2 時，輸出字型顏色為
#65e3e7
：
$num：1；h3{ @if $num == 1 { color： #ee78da； } @if $num == 2 { color： #65e3e7； }}
編譯成 CSS 程式碼：
h3 { color： #ee78da；}
從編譯後的程式碼可以很明顯的看出，因為變數
$num
的值為 1，所以最終輸出的顏色值為
#ee78da
。
@else指令
if
指令後面可以跟一個
@else
指令，但是
@else
指令不需要帶有條件表示式。當不滿足
@if
指令後面接的條件時，會執行
@else
指令中的內容。
示例：
$num：1；h3{ @if $num == 2 { color： #ee78da； } @else { color： #65e3e7； }}
編譯成 CSS 程式碼：
h3 { color： #65e3e7；}
可以看到，因為變數
$num
的值為1 ，
@if
指令後面的條件表示式不滿足，所以最終輸出的顏色值為
#65e3e7
。
@else if指令
@else if
指令也是和
@if
指令一起使用的，
@else if
指令後面同樣可以接條件表示式。如果
@if
指令後面的條件表示式為
false
，則執行
@else if
指令後面的條件表示式，如果都不滿足，則執行
@else
指令。
示例：
$num： 3；h3{ @if $num == 1 { font-size： 12px； color： red； } @else if $num == 2{ font-size： 14px； color： green； } @else if $num == 3{ font-size： 16px； color： yellow； } @else { font-size： 18px； color： pink； }}
編譯成 CSS 程式碼為：
h3 { font-size： 16px； color： yellow；}
總結
Sass 中的
@if
指令後面可以接多個
@else if
指令和一個
@else
指令。
@if
指令和
@else if
指令後面都需要接條件表示式，
@else
指令則不用。
