DIV CSS 佈局教程網

在Sass中，我們也可以使用@while語句來實現循環操作。跟JavaScript一樣，@while語句既是循環語句，也是條件判斷語句。

語法：

 
@while(判斷條件)
{
    執行語句;
}

說明：

在Sass中，沒有類似於JavaScript的“do...while...”這種語句。這一點小伙伴們要注意一下。

舉例1：使用@while循環

 
$i:3;
@while ($i>0)
{
    .item-#{$i}
    {
        width: (20px + $i);
    }
    $i : ($i - 1);   //遞減操作
}

編譯出來的CSS代碼如下：

 
.item-3 
{
    width: 23px;
}

.item-2 
{
    width: 22px;
}

.item-1 
{
    width: 21px;
}

分析：

當然，對於上面這個例子，我們也可以使用for循環來實現，效果是一樣的。

舉例2：使用@for循環

 
@for $i from 1 through 3
{
    .item-#{$i}
    {
        width:(20px+$i);
    }
}

編譯出來的CSS代碼如下：

 
.item-1 
{
    width: 21px;
}
.item-2 
{
    width: 22px;
}
.item-3 
{
    width: 23px;
}

分析：

細心的小伙伴們可能就會有疑問了：對於“width:(20px+$i);”這個，$i是一個數字，而20px是像素，這可以進行相加嗎？其實，在之前“Sass數據類型”這一節已經說過了：在Sass中，帶有單位的數值我們也可以把它當做一個“數字”來處理。

此外，我們還要記得一點：帶單位的數字與不帶單位的數字是可以進行相加，結果是一個帶單位的數字。但是帶單位的數字與不帶單位的數字是不可以相減的，小伙伴們可以自行測試一下。