重复一定次数去输出一些样式，每次输出的样式可能会有一点有规律的区别 ... 我们可以使用 @for 这个指令 ... 先用一个 @for ... 后面加上一个变量 ... 这个变量会在每次循环的时候都加上 1 ... 然后是 from 开始的值 ... through 后面是结束的值 ... 把每次循环的要输出的样式放到后面的花括号里 ...

@for $var from <start> through <end> { ... }

这个 @for 指令还有另外一种形式， through 变成了 to ... 这两种形式的区别就是停止循环的地方不太一样 ... 下面， 我们再通过一个例子来理解一下 @for 这个指令 ...

比如我们要创建一个网格系统，根据使用的网格的数量，来设置不同的网格类的宽度 ... 这里先定义一个变量 ... 叫做 $columns .. 先把它的值设置成 4 ...

然后再去使用 @for ... 后面加上一个变量 ... 一般可以叫它 $i ... from 1 ，循环从 1 开始 ... through ... 后面加上循环结束的值 ... 这里我们用 $columns 这个变量来表示 ... 现在它的值是 4 ... 这样这个循环就会从 1 开始，第一个循环这个 $i 的值就会是 1 ... 下一次循环的时候，它的值就会再加上 1 ，也就会变成 2 ... 循环一会到它的值为 4 的时候停止 ... 因为我们用的是 through ... 所以这个循环会包含结束的值 ... 如果用 to 的话 ... 循环会在 $i 变成 4 以后立即停止 ...

再输入一组花括号 ... 在这里，可以去设计每次循环要输出的样式 ... 先添加一个样式的选择器，这个选择器可以使用 .col- 开头 ... 后面加上每次循环的时候，$i 的值 ... 需要用一个 interpolation 的形式去输出变量的值 ... #{$i} ..

用一个 width 属性 ... 这个宽度的值，需要做点数字运算 .. 我们可以使用 100% / $columns ... 把 100% 的宽度平均分成几份 ... 再用这个数去乘以 $i ... 这样每一次循环的时候，$i 的值是 1 ... 宽度就是 100% / 4 再乘以 1 ... 也就是 25%...

保存一下 ... 在输出的结果里，你会看到，一共输出了四段样式 ... 第一次循环输出的是 .col-1 ... 宽度是 25% ... 第二次是 .col-2 ... 宽度是 50% ..

这里我们可以再把这个 through ，换成 to 来试一下 ... 保存 ... 你会看到，这个循环到 4 那里就结束了，也就是它不会包含结束值的那次循环 ...

$columns: 4;

@for $i from 1 through $columns {
.col-#{$i} {
width: 100% / $columns * $i;
}
}

再撤销一下 ... 然后修改一下这个结束的值 .. 也就是去修改一下 $columns 变量的值 ... 修改成 12 ... 保存 ... 这样这个循环会执行 12 次 ... 每次循环都会根据本次循环的 $i 的值，输出对应的选择器，还有算出它的宽度值 ...