DIV CSS 佈局教程網

接觸過Boostrap的小伙伴，估計都見過.col1~.col12這樣的樣式。在CSS中，對於這種樣式我們一般都需要一個一個地書寫。但是在Sass中，我們可以使用@for循環來實現。

在Sass中，我們可以使用“@for”來實現循環操作。其中，Sass中的@for循環有2種方式。

語法：

 
方式1：@for $i from 開始值 through 結束值
方式2：@for $i from 開始值 to 結束值

說明：

這2種方式是相似的，唯一的區別是：方式1包括結束值，方式2不包括結束值。其中“開始值”和“結束值”都是正整數。

舉例1：

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

編譯出來的CSS代碼如下：

 
.item-1
{
    width:20px;
}
.item-2
{
    width:40px;
}
.item-3
{
    width:60px;
}

分析：

如果將“@for $i from 1 through 3”改為“@for $i from 1 to 3”，則編譯出來的CSS代碼如下：

 
.item-1
{
    width:20px;
}
.item-2
{
    width:40px;
}

舉例2：

 
@for $i from 1 through 3
{
    .border-#{$i}
    {
        border:#{$i}px solid red;
    }
}

編譯出來的CSS代碼如下：

 
.border-1 
{
    border: 1px solid red;
}

.border-2 
{
    border: 2px solid red;
}

.border-3 
{
    border: 3px solid red;
}

分析：

如果小伙伴們忘了“插值#{}”的用法，記得回去翻翻“Sass插值”這一節。