Sass 條件判斷 @if：分支、falsy 與 if() 函式

Q: Sass 裡哪些值算假？

只有 false 與 null 兩個。數字零、空字串、空的 list 與 map 在 Sass 裡全都算真，這與 JavaScript 差很多，從 JavaScript 過來的人特別容易踩到。

Q: @if 和 if() 函式差在哪？

@if 是控制指令，用來決定要不要執行一整段程式碼；if() 是函式，依條件回傳兩個值之一，只能用在需要值的位置。想在一行內二選一就用 if()，需要分支好幾行就用 @if。

Q: 什麼時候該用 null 取代 @if？

當條件只是要決定某一行宣告要不要輸出時。把參數預設值設成 null，值為 null 的宣告整行都不會出現，比包一層條件判斷簡潔得多。

@if 讓混入與函式可以依照參數走不同的路。它在編譯期執行：沒被選中的分支不會出現在產出的 CSS 裡。

基本寫法

scss

@mixin theme($mode) {
  @if $mode == dark {
    background: #1a1a1a;
    color: #f5f5f5;
  } @else if $mode == sepia {
    background: #f4ecd8;
    color: #5b4636;
  } @else {
    background: #fff;
    color: #333;
  }
}

.page { @include theme(dark); }

css

.page {
  background: #1a1a1a;
  color: #f5f5f5;
}

@else 必須緊接在前一個區塊的右大括號後面，中間不能有換行以外的東西。

只有 false 與 null 是假

Sass 的真假判斷比 JavaScript 單純得多：

值	Sass	JavaScript
`false`	假	假
`null`	假	假（`null`）
`0`	真	假
`""`	真	假
`()`（空 list）	真	真（`[]`）

scss

@if 0 {
  // 這裡會執行！
}

從 JavaScript 過來的人最常踩這個

想判斷「有沒有給值」請明確寫 @if $x != null，別依賴 falsy。

條件的寫法

搭配運算子的比較與邏輯：

scss

@if $width > 768px { }
@if $mode == dark and $contrast == high { }
@if $shadow == null or $shadow == none { }
@if not $is-compact { }

常搭配 sass:meta 與 sass:map 的檢查函式：

scss

@use "sass:meta";
@use "sass:map";

@if meta.type-of($color) != color { }
@if map.has-key($theme, $name) { }

if() 函式

單純二選一時，if() 比 @if 精簡：

scss

@use "sass:color";

@mixin badge($bg) {
  background: $bg;
  color: if(color.channel($bg, "lightness", $space: hsl) > 60%, #1a1a1a, #fff);
}

if($條件, $真時的值, $假時的值)，它是函式，只能用在需要值的地方。

if() 只求值被選中的那個分支

這與一般函式不同（一般函式的引數會先全部算完）。所以把可能報錯的運算放進沒被選中的分支是安全的：

scss

$w: if($n == 0, 0, math.div(100%, $n));  // $n 是 0 時不會執行除法

可以用 null 就別寫 @if

條件如果只是要決定「這一行宣告要不要輸出」，用 null 更簡潔：

scss

// ⚠️ 囉嗦
@mixin box($shadow: null) {
  padding: 16px;
  @if $shadow != null {
    box-shadow: $shadow;
  }
}

// ✅ 值為 null 的宣告本來就不會輸出
@mixin box($shadow: null) {
  padding: 16px;
  box-shadow: $shadow;
}

細節見混入的參數。

別把它當執行期的判斷

@if 在 編譯期 就決定完了，它看不到瀏覽器的任何狀態：

scss

// ❌ 這不會依螢幕寬度切換，$is-mobile 是編譯時就固定的值
@if $is-mobile {
  .nav { display: none; }
}

// ✅ 執行期的條件交給 CSS
@media (max-width: 767px) {
  .nav { display: none; }
}

同理，主題若要能在瀏覽器裡即時切換，靠的是 CSS 自訂屬性，不是 @if。分工見搭配 CSS 自訂屬性。

搭配 @error 檢查參數

scss

@use "sass:meta";

@mixin square($size) {
  @if meta.type-of($size) != number {
    @error "square() 的 $size 必須是數字。";
  }
  width: $size;
  height: $size;
}