@while 指令可以让我们去指定一个条件，当这个条件为真的时候，就会一直去循环的做事情，直到这个要判断的条件返回 false 为止。

它跟之前介绍的 @for 有点类似，不过 @while 循环更灵活一些，可以创建更复杂的循环操作。先用一个 @while ... 后面加上一个要判断的条件 ... 然后在大括号里，指次每次循环要做的事情，比如输出的样式 ... 还有在这里，你需要做点事，让 @while 循环可以结束 .. 不然它会一直循环下去 ..

我们还是通过一个例子来理解一下这个 @while 指令 ... 这里先定义一个变量 ... 比如叫它 $i ... 它的值设置成 6 ... 另起一行 ... 输入 @while $i > 0 .. 这里的 $i > 0 就是我们设置的条件，如果这个条件一直返回 true ... 就会一直去执行后面的大括号里的东西 ..

在这里，先输入一段样式 ... 在这个选择器上， 可以输出本次循环的 $i 这个变量的值 ... 它的 width 属性，也可以根据当前的 $i 的值去生成 ... width: 5px * $i; ...

然后在这段样式的外面 ... 我们需要重新去设置一下 $i 的值 ... 让它等于它本身减去 2 .. 这样，第一次循环以后，这个 $i 的值，就会变成 6 减去 2 ，结果是 4 ，下一次循环结束的时候，它的值就是 4 减去 2，也就是 2 ... 这样这个循环最终会结束掉，因为要判断的条件，$i > 0 早晚会返回 false ...

保存 ... 你会看到输出的结果 ... 第一次循环，选择器里面的这个数字，就是最开始我们为 $i 这个变量设置的值 ，也就是 6 ... 它的宽度属性的值，也会根据当前 $i 的值去生成 ... 5px * 6 ，结果就是 30 ... 这次循环的结尾，我们让 $i 的值变成它本身减去 2 ... 这样下一次循环的时候，这个选择器里的数字，就变成了 4 ...

再执行一次循环的时候，它的值会变成 2 .. 最后 2 - 2 的结果是 0 .. @while 后面要判断的条件 $i > 0 ，就会返回 false ，这样整个循环就会结束了。