Sass-@if的使用

@if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用。

假设要控制一个元素隐藏或显示，我们就可以定义一个混合宏，通过 @if...@else... 来判断传进参数的值来控制 display 的值。如下所示：

@mixin blockOrHidden($boolean: true) {
  @if $boolean {
    display: block;
  } @else {
    display: none;
  }
}

.block {
  @include blockOrHidden;
}

.hidden {
  @include blockOrHidden(false);
}

编译成css如下：

.block {
  display: block;
}

.hidden {
  display: none;
}

再来一个例子：

@mixin border-radius($radius) {
  @if $radius > 3 {
    border: $radius dotted red;
  } @else {
    border: $radius solid blue;
  }
}

.red {
  @include border-radius(5px);
}

.blue {
  @include border-radius(2px);
}

编译成css如下：

.red  {
  border: 5px dotted red;
}

.blue {
  border: 2px solid blue;
}