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用得比较少，我们只需要简单了解一下即可。