Sass中@for循环

2020-01-02159次阅读sass

在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;
}

 

上一篇: js从数组中删除重复项  下一篇: CSS自定义属性实现按钮与气泡动画  

Sass中@for循环相关文章