Sass 條件語句

本節我們來學習 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 指令則不用。