除了@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;}

编辑：广州明生堂生物科技有限公司

标签：列表,代码,图片,数据类型,是一个