Sass流程控制@for循环

接触过Boostrap的小伙伴，估计都见过.col1~.col12这样的样式。在CSS中，对于这种样式我们一般都需要一个一个地书写。但是在Sass中，我们可以使用@for循环来实现。

在Sass中，我们可以使用“@for”来实现循环操作。其中，Sass中的@for循环有2种方式。

语法：

方式1：@for $i from 开始值 through 结束值
方式2：@for $i from 开始值 to 结束值

说明：

这2种方式是相似的，唯一的区别是：方式1包括结束值，方式2不包括结束值。其中“开始值”和“结束值”都是正整数。

举例1：

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

举例2：

@for $i from 1 through 3
{
    .border-#{$i}
    {
        border:#{$i}px solid red;
    }
}

编译出来的CSS代码如下：

.border-1
{
    border: 1px solid red;
}
 
.border-2
{
    border: 2px solid red;
}
 
.border-3
{
    border: 3px solid red;
}

分析：

如果小伙伴们忘了“插值#{}”的用法，记得回去翻翻“Sass插值”这一节。