Hi 今天的主題是有寫過任一種程式語言的人都會很熟悉的“條件判斷式”，
下面會介紹 @if @else if @else

@if
if後方會加上需要判斷的條件，判斷結果為成立時，就會套用樣式。

p {
  @if $device == desktop {
    font-size: 1.5rem;
  } 
  color: red;
  }
  
$device: mobile;

跑出來的css結果為

p {
   color: red;
   }

因為device為mobile，if後方的條件為不成立，
所以最後編譯出的css並不會有font-size樣式。

@else if
當if後方的條件不成立時，就會往下找@else if的條件，
依照@else if的排序一個一個往下找。
(如果都不成立，就會找@else，稍後會介紹)

p {
  @if $type == ocean {
    color: blue;
  } @else if $type == moon {
    color: white;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
$type: monster;

因為type為monster，if後方的條件為不成立，往下找else if，
直到找到符合的條件，所以最後編譯出的css為color: green。

// 轉成 CSS
p {
  color: green;
}

@else
當if後方的條件不成立時，就會往下找@else if的條件，
如果@else if還是都不成立，就會找@else。
(如果沒有@else if也會直接找@else)
我們直接用上一個例子

p {
  @if $type == ocean {
    color: blue;
  } @else if $type == moon {
    color: white;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
$type: night;

因為type為night，if後方的條件為不成立，往下找else if也都不成立，
最後找@else，所以最後編譯出的css為color: black。

// 轉成 CSS
p {
  color: black;
}