Sass流程控制@while循环

在Sass中，我们也可以使用@while语句来实现循环操作。跟JavaScript一样，@while语句既是循环语句，也是条件判断语句。

语法：

 @while(判断条件)
{
    执行语句;
} 

说明：

在Sass中，没有类似于JavaScript的[do...while...]这种语句。这一点小伙伴们要注意一下。

举例1：使用@while循环

 $i:3;
@while ($i>0)
{
    .item-#{$i}
    {
        width: (20px + $i);
    }
    $i : ($i - 1);   //递减操作
} 

编译出来的CSS代码如下：

 .item-3
{
    width: 23px;
}
 
.item-2
{
    width: 22px;
}
 
.item-1
{
    width: 21px;
} 

分析：

当然，对于上面这个例子，我们也可以使用for循环来实现，效果是一样的。

举例2：使用@for循环

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

编译出来的CSS代码如下：

 .item-1
{
    width: 21px;
}
.item-2
{
    width: 22px;
}
.item-3
{
    width: 23px;
} 

分析：

细心的小伙伴们可能就会有疑问了：对于[width:(20px+$i);]这个，$i是一个数字，而20px是像素，这可以进行相加吗？其实，在之前[ Sass数据类型 ]这一节已经说过了：在Sass中，带有单位的数值我们也可以把它当做一个[数字]来处理。

此外，我们还要记得一点：带单位的数字与不带单位的数字是可以进行相加，结果是一个带单位的数字。但是带单位的数字与不带单位的数字是不可以相减的，小伙伴们可以自行测试一下。

查看更多关于Sass流程控制@while循环的详细内容...