DIV CSS 佈局教程網

除了@for以及@while這2種循環方式之外，Sass還為我們提供了另外一種循環方式：each循環。Sass中的each循環跟jQuery中的each循環很相似，大家對比一下。

語法：

 
@each $var in 列表值
{
    ……
}

說明：

$var是一個變量，也可以根據後面列表值表示的內容需要寫成$item、$color等。列表值，是Sass中的一種數據類型，可以稱之為“Sass中的數組”。對於列表值，我們在之前的“Sass數據類型”這一節已經接觸過了。

舉例：圖片循環

 
$list:logo,banner,btn;
@each $var in $list
{
    .#{$var}-img
    {
        background-image:url("images/#{$var}.png");
    }
}

編譯出來的CSS代碼如下：

 
.logo
{
    background-image: url("images/logo.png");
}
.banner
{
    background-image: url("images/banner.png");
}
.btn
{
    background-image: url("images/btn.png");
}

分析：

在這個例子中，我們使用@each循環快速生成背景圖片樣式。這種技巧在實際開發中也經常被用到。

舉例：圖片合並

 
$list:sprite1,sprite2,sprite3;
%spriteAll
{
    background:url("images/sprite.png") no-repeat;
}
@each $var in $list
{
    .#{$var}
    {
        @extend %spriteAll;
        background-position: 0 index($list,$var) * (-30px);
    }
}

編譯出來的CSS代碼如下：

 
.sprite1, .sprite2, .sprite3 
{
    background: url("images/sprite.png") no-repeat;
}
.sprite1 
{
    background-position: 0 -30px;
}
.sprite2 
{
    background-position: 0 -60px;
}
.sprite3 
{
    background-position: 0 -90px;
}

分析：

從上面這個例子可以看出，我們使用@each循環來操作CSS Sprite圖片是非常方便的。CSS Sprite技巧在實際開發中大量用到，具體原理以及使用請參考“HTML和CSS進階教程”中的“13.3 CSS Sprite”這一節。

舉例：

 
$properties:(margin,padding);
@mixin setValue($side , $value)
{
    @each $prop in $properties
    {
        #{$prop}-#{$side}:$value;
    }
}
.login-box
{
    @include setValue(top , 14px);
}

編譯出來的CSS代碼如下：

 
.login-box
{
    margin-top: 14px;
    padding-top: 14px;
}

：Sass教程暫時只更新了一半，另外一半寫完再更新，小伙伴們別忘了持續關注！