@while 是 Sass 中的一种控制结构，它允许我们基于特定条件重复执行一段代码。与 @for 和 @each 不同的是，@while 更加灵活，因为它可以让你根据任意布尔表达式来决定循环是否继续。
使用场景
当你需要根据一个或多个条件反复执行某些操作时，@while 就派上用场了。这使得你可以实现更复杂的逻辑，比如创建动态的布局或者根据用户的输入生成不同的样式。
基本语法
@while 循环的基本结构如下：
$var: initial-value;
@while condition {
// 你的样式代码
$var: next-value;
}这里的 $var 是一个变量，用来存储循环过程中可能发生变化的数据。initial-value 是循环开始时该变量的值。condition 是一个布尔表达式，只有当这个条件为真时，循环体才会被执行。在循环体内，我们可以修改 $var 的值，以便最终退出循环。
示例：创建等间距的元素
假设我们需要创建一系列宽度相等的盒子，并且每个盒子之间的间隔也相同。我们可以通过 @while 循环来动态生成这些盒子的样式。
-- -------------------- ---- -------
----------- -- -- ----
--------- ----- -- ---------
----------- ------ -- -------
----------------- ----------- - ----------- - --------- - ----------- - ---- -- -----
---------- -
------ -----------------
-------- -----
---------- -----
-
------ ---------- - - -
----------------------------- -
------ -----------
------------- ---------
-
----------- ---------- - --
-- -----------------
--- ---------- -- - -
----------------------------- -
------------- --
-
-
-在这个例子中，我们首先定义了几个变量：$box-count 表示我们要创建的盒子数量；$spacing 表示每个盒子之间的间隔；$box-width 表示每个盒子的宽度。然后我们计算出容器的总宽度，确保所有盒子加上间隔后能正好填满容器。
接着，我们使用 @while 循环来为每个盒子生成相应的 CSS 规则。每次循环时，我们都会将 $box-count 减一，直到其值小于等于零为止。这样，我们就可以为每一个盒子都设置相应的宽度和右边距。
需要注意的是，在最后一个盒子的情况下，我们特意去掉了右边距，以避免产生多余的空白区域。
总结
通过上面的例子，我们可以看到 @while 循环在处理需要多次执行并且依赖于特定条件的任务时非常有用。当然，实际项目中可能会有更加复杂的需求，但掌握了 @while 的基本用法后，你就能更灵活地应对各种挑战了。希望这个教程对你有所帮助！