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