Sass-@if的使⽤
@if 指令是⼀个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回⼀个样式块，反之 false 返回另⼀个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else ⼀起使⽤。
假设要控制⼀个元素隐藏或显⽰，我们就可以定义⼀个混合宏，通过 @if...@ 来判断传进参数的值来控制 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;
}
}
script在html中的用法
.red {
@include border-radius(5px);
}
.blue {
@include border-radius(2px);
}
编译成css如下：
.red  {
border: 5px dotted red;
}
.blue {
border: 2px solid blue;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。