Sass流程控制@each循环

除了@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技巧在实际开发中大量用到，具体原理以及使用请参考《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;
}