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

假設(shè)要控制一個(gè)元素隱藏或顯示，我們就可以定義一個(gè)混合宏，通過 @if...@else... 來判斷傳進(jìn)參數(shù)的值來控制 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;
}