DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> Sass教程 >> 6.3 @for循環
6.3 @for循環
編輯:Sass教程     

接觸過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插值”這一節。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved