DIV CSS 佈局教程網

在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用得比較少，我們只需要簡單了解一下即可。