Sass流程控制@if语句
在Sass中,我们可以使用“@if语句”来进行条件选择判断。Sass的条件选择语句共有3种:
- (1)@if…(单向选择);
- (2)@if…@else…(双向选择);
- (3)@if…@else if…(多向选择);
接下来,我们一一详细介绍这3种条件选择语句。
一、@if语句
在Sass中,我们可以使用“@if…”来实现单向选择。
举例:
div
{
@if (10px>5px)
{
border:1px solid gray;
}
}
编译出来的CSS代码如下:
div
{
border:1px solid gray;
}
二、@if…@else…
在Sass中,我们可以使用“@if…@else…”来实现双向选择。
举例:
@mixin checkBlock($boolean:true)
{
@if $boolean
{
display:block;
}
@else
{
display:none;
}
}
.block
{
@include checkBlock;
}
.hidden
{
@include checkBlock(false);
}
编译出来的CSS代码如下:
.block
{
display: block;
}
.hidden
{
display: none;
}
分析:
这里定义了带有一个参数的混合宏checkBlock,参数默认值为true。然后使用“@if…@else…”语句对传过来的参数进行判断,从而决定元素display属性值为block(显示),还是none(隐藏)。
三、@if…@else if…
在Sass中,我们可以使用“@if…@else if…”来实现多向选择。
举例:
@mixin checkColor ($width)
{
@if ($width>100px)
{
color:red;
}
@else if ($width<100px)
{
color:green;
}
@else
{
color:blue;
}
}
div
{
@include checkColor(100px);
}
编译出来的CSS代码如下:
div
{
color:blue;
}
分析:
“@if…@else if…”这种多向选择的语句在Sass用得比较少,我们只需要简单了解一下即可。