本节我们学习 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 {
width: 10px;
}
.width2 {
width: 20px;
}
.width3 {
width: 30px;
}上述代码中，循环一共循环了三次，从 $i 的值为 1 开始循环，一直到 3 结束，并且包括了 3。
示例：
然后我们再来看一下 to 关键字的使用：
@for $i from 1 to 3{
.width#{$i} {
width: $i * 10px;
}
}编译后的 css 代码：
.width1 {
width: 10px;
}
.width2 {
width: 20px;
}和 through 关键字不同，to 关键字的循环虽然也是从 $i 的值为 1 开始循环，但是不包括 3 ，所以整个循环只循环两遍。
@while指令
@while 指令也可以用于循环样式，后面接 SassScript 表达式，循环会一直到表达式的值为 false 时停止。
示例：
循环遍历12px、14px、16px 的字体样式：
$num: 12;
@while $num < 18 {
.f-#{$num} {
font-size: #{$num}px;
}
$num: $num + 2;
}
编译成 CSS 代码：
.f-12 {
font-size: 12px;
}
.f-14 {
font-size: 14px;
}
.f-16 {
font-size: 16px;
}变量 $num 的初始值为 12，首先会输出 font-size:12px 样式，然后每次循环都会在原有的基础上加 2，一直到 不满足 $num < 18 这个条件，则循环会停止执行。
@each 指令
@each 指令可以用于遍历一个列表，然后从列表中取出对应的值。
语法：
@each $i in <list>
$i 就是一个变量名，<list> 是一个 SassScript 表达式，返回一个列表值。
示例：
$list: 5 10 15 20 25;
@each $i in $list {
.p-#{$i}{
padding: #{$i}px;
}
}
编译成 CSS 代码：
.p-5 {
padding: 5px;
}
.p-10 {
padding: 10px;
}
.p-15 {
padding: 15px;
}
.p-20 {
padding: 20px;
}
.p-25 {
padding: 25px;
}可以看到上述代码中，我们遍历了定义好的 $list 中的5个值，一直到列表中的值遍历完后，循环才会停止。
学习更多技能
请点击下方公众号
