在前端开发中，常常需要生成多组相似的样式，例如一组按钮样式，每个按钮的样式只有颜色稍有差异。这时候使用 @while 循环可以非常方便地生成多组样式。
@while 循环的语法
@while 循环的语法比较简单，类似于普通的 while 循环。可以使用 $i 变量表示当前循环次数，循环条件可以是任意表达式。
--- -- ------ -- -- -- - -- --- --- -- - -- -
使用 @while 循环生成多组样式
下面以生成多组按钮样式为例。假设我们需要生成 5 种颜色的按钮样式，颜色值保存在一个列表中。首先定义一个变量 $colors 存储颜色列表：
-------- -------- -------- -------- -------- --------
然后使用 @while 循环逐个生成按钮样式：
--- --
------ -- -- --------------- -
------- ------------ ---- -- -------
---------------- -
----------------- -------
------- -
----------------- -------------- -----
-
-
--- -- - --
-上面的代码中，使用了 % 占位符定义了一个可复用的按钮样式，其中 $i 作为占位符名的一部分。这个占位符可以理解为一个样式模板，包含了按钮的基本样式。在循环中，我们逐个以不同的颜色为参数应用这个样式模板，生成多组相似的样式。
应用生成的多组样式
生成多组样式后，我们可以通过 @extend 继承这些样式，并为每个按钮添加自己的类名和其他样式。例如，生成的 5 种颜色样式可以分别应用于 5 个不同的按钮：
-------- - ------- ------------- -- ------ - --------- - ------- ------------- -- ------ - -- ---
示例代码
下面是完整的示例代码：
-- ------
-------- -------- -------- -------- -------- --------
-- -- ------ --------
--- --
------ -- -- --------------- -
------- ------------ ---- -- -------
---------------- -
----------------- -------
------- -
----------------- -------------- -----
-
-
--- -- - --
-
-- ---------
-------- -
------- -------------
------- --- ----- --------
-
--------- -
------- -------------
------- --- ----- --------
-
---------- -
------- -------------
------- --- ----- --------
-
----------- -
------- -------------
------- --- ----- --------
-
----------- -
------- -------------
------- --- ----- --------
-总结
使用 @while 循环可以非常方便地生成多组相似的样式，大大提高了开发效率。在应用生成的多组样式时，可以通过 @extend 继承这些样式，并为每个元素添加自己的类名和其他样式。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664f3391d3423812e403a680