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中,带有单位的数值我们也可以把它当做一个“数字”来处理。

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