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

查看更多关于Sass流程控制@if语句的详细内容...