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中,带有单位的数值我们也可以把它当做一个“数字”来处理。
此外,我们还要记得一点:带单位的数字与不带单位的数字是可以进行相加,结果是一个带单位的数字。但是带单位的数字与不带单位的数字是不可以相减的,小伙伴们可以自行测试一下。