Sass 循环语句

本节我们学习 Sass 中的循环语句，Sass 中的循环语句可以使用 @for 指令和 @while 指令来实现。

@for指令

@for 指令可以用于循环生成样式，@for 指令有两种类型，如下所示：

// 第一种
@for $i from <start> through <end>
    
// 第二种
@for $i from <start> to <end>

其中 $i 表示变量，start 表示起始值，end 表示结束值。其实这两种方式的区别就在于，使用关键字 through 时会包括 end 这个数，而使用关键字 to 则不会包括 end 这个数。

示例：

如下代码，使用 through 关键字实现 @for 循环：

@for $i from 1 through 3{
    .width#{$i} {
        width: $i * 10px; 
    }
}

编译成 CSS 代码：

.width1