@if 指令是一個 SassScript，它可以根據條件來處理樣式塊，如果條件為 true 返回一個樣式塊，反之 false 返回另一個樣式塊。在 Sass 中除了 @if 之，還可以配合 @else if 和 @else 一起使用。

假設要控制一個元素隱藏或顯示，我們就可以定義一個混合宏，通過 @if...@else... 來判斷傳進參數的值來控制 display 的值。如下所示：

//SCSS
@mixin blockOrHidden($boolean:true) {
  @if $boolean {
      @debug "$boolean is #{$boolean}";
      display: block;
    }
  @else {
      @debug "$boolean is #{$boolean}";
      display: none;
    }
}

.block {
  @include blockOrHidden;
}

.hidden{
  @include blockOrHidden(false);
}

編譯出來的CSS:

.block {
  display: block;
}

.hidden {
  display: none;
}