這種判斷語句要配合混合宏來使用

定義下一混合宏

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

@for循環

@for $i from <start> through <end>
@for $i from <start> to <end>

sass進階 @if @else if @else @for循環