这一节我们学习Sass中的循环语句，Sass中的循环语句可以使用@for指令和@while指令来实现。@for指令@for指令可用于循环生成样式，@for指令有两种类型，如下：//第一种@for$ifromthrough//第二种@for$ifromto其中$i代表一个变量，start代表开始值，end代表结束值。其实这两种方式的区别在于，使用关键字through时，包含数字结尾，而使用关键字to时，则不包含数字结尾。示例：以下代码使用through关键字实现@for循环：@for$ifrom1through3{.width#{$i}{width:$i*10px;}}编译成CSS代码：.width1{width:10px;}.width2{width:20px;}.width3{width:30px;}上面代码中，loop一共循环了三次，从$i开始取值为1，以3结尾，包括3。例子：那我们看看to关键字的用法：@for$ifrom1to3{.width#{$i}{width:$i*10px;}}编译后的CSS代码：.width1{width:10px;}.width2{width:20px;}和through关键字不同的是，虽然to关键字的循环也是从$i的值到1开始的，但是不include3，所以整个循环只循环了两次。@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$iin$i是一个变量名，是一个返回列表值的SassScript表达式。示例：$list:510152025;@each$iin$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个值，直到遍历完list中的值才会停止循环。
