前言
在编写 CSS 样式时，我们时常会遇到反复书写类似的样式代码的情况。这种情况下，暴力复制的方式既不优雅也极易出错，如何优雅地解决这个问题呢？
在这篇文章中，我们将介绍 SASS 中循环结构的应用，让我们能够在动态生成 CSS 样式过程中，省去反复书写类似代码的麻烦。
SASS 中的循环结构
在 SASS 中，我们可以使用 @for 语句来实现循环结构，它的语法结构如下：
@for $var from start through end
// some styles其中，$var 是循环变量名，start 和 end 是循环的开始值和结束值，through 表示包括结束值在内，还有一个可选的 to 用来表示不包括结束值。
下面是一个例子：
@for $i from 1 through 3
.class-#{$i}
font-size: 10px * $i上述代码片段将生成以下的样式代码：
-- -------------------- ---- -------
-------- -
---------- -----
-
-------- -
---------- -----
-
-------- -
---------- -----
-如果我们要使用 to 语法，就需要在循环条件中使用 < 或 >。
下面是一个例子：
@for $i from 1 to 4
.class-#{$i}
font-size: 10px * $i上述代码片段将生成以下的样式代码：
-- -------------------- ---- -------
-------- -
---------- -----
-
-------- -
---------- -----
-
-------- -
---------- -----
-这里的 class-4 就不包括在循环范围内了。
动态生成 CSS 样式
上述的例子中，我们只是简单地生成了一些类名和样式代码，但很显然这种方式的应用远不止这些。
下面我们以动态生成 CSS 中厂家列表为例进行讲解。
假设有一个厂家列表组件需要显示厂家名称和对应的徽章，我们可以在 SASS 中为徽章的背景图片配置一个列表，然后采用 @for 循环结构来生成对应的 CSS 代码。
具体的实现代码如下：
-- -------------------- ---- -------
-- --------
------- ---------
-- ---- --- --
---- -- ---- - ------- --------------
--------------
----------- ------------------------ ----------- ------ --------- ------
-- ---- ----
--- ---------------------
--- -------------------- ------
--- -------------------- ------
--- -------------------- ------
---
-----其中 length() 函数返回列表的长度，nth() 函数用于获取列表中第 $n$ 个元素，index() 函数用于获取某个元素在列表中的索引。
这样，我们就成功地生成了对应的样式代码和 HTML 代码。
总结
使用 SASS 中的循环结构，可以方便快捷地生成类似的样式代码，去除了反复书写类似代码的烦恼，让我们可以更加专注于业务逻辑的处理。
希望本文对各位读者对 SASS 循环结构的应用有所帮助，同时也希望大家能够充分发掘 SASS 中更多的强大功能，提高工作效率和生产力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ca04e95ad90b6d04190968