在Sass中,可以使用“@for”来实现循环操作。其中有2种方式。
@for $i from 开始值 through 结束值
@for $i from 开始值 to 结束值
这2种方式是相似的,唯一的区别是:方式1包括结束值,方式2不包括结束值。其中“开始值”和“结束值”都是正整数。
@for $i from 1 through 3
{
.item-#{$i}
{
width:(20px * $i);
}
}
编译出来的CSS代码如下:
.item-1
{
width:20px;
}
.item-2
{
width:40px;
}
.item-3
{
width:60px;
}
如果将“@for $i from 1 through 3”改为“@for $i from 1 to 3”,则编译出来的CSS代码如下:
.item-1
{
width:20px;
}
.item-2
{
width:40px;
}