sass进阶 @if @else if @else @for循环

这种判断语句要配合混合宏来使用

定义下一混合宏

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