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插值 ]这一节。

查看更多关于Sass流程控制@for循环的详细内容...