@if

@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;
}