在前端开发中，CSS 是无法避免的一部分，但是 CSS 语言本身存在一定的不足，例如不能定义变量、嵌套、函数等等。这时候我们就需要一种 CSS 预处理器，例如 SASS（Syntactically Awesome Style Sheets）来帮我们解决这些问题。在 SASS 中，循环函数是一种非常方便且强大的语法结构，下面我们就来详细了解一下其用法。
基本语法
SASS 中的循环函数是 @for，其基本语法如下：
---- ---- ---- ------- ------- ----- - -- ---- -
其中，$var 为循环变量，<start> 表示循环起始值，<end> 表示循环结束值，through 代表循环包括 <end> 本身。
使用 @for 遍历一个变量列表，语法如下：
---------- --------- --------- ---- --------- ---- ---- -- --------- - -- ---- -
其中，$var-list 为变量列表，变量间用 , 隔开，$var 表示循环变量。
循环嵌套
在 SASS 中，可以将一个循环语句嵌套在另一个循环语句中，例如：
---- -- ---- - ------- - -
---------- -
---- -- ---- - ------- - -
------ -----------
-
-
-这段代码将生成如下 CSS 样式：
------ - ------ ----- ------ ---- ------ ---------- - ------ - ------ ----- ------ ---- ------ ---------- - ------ - ------ ----- ------ ---- ------ ---------- -
循环计数器
在循环中，有时候需要获取循环次数，这时候就需要使用 @while 或 @each 函数：
---- -- ---- - ------- - -
---------- -
--------- ---
------ -------- - - -
-------- --------- -------------
--------- -------- - --
-
-
-这段代码将在 .col-1、.col-2、.col-3 中添加计数器，生成如下 CSS 样式：
------------- - -------- --------- --- -------- --------- --- - ------------- - -------- --------- --- -------- --------- --- -------- --------- --- - ------------- - -------- --------- --- -------- --------- --- -------- --------- --- -------- --------- --- -
示例
下面给出一个简单示例，实现一个简单的 12 栅格系统：
-- ------
-------------- ---
------------------- -----
-- --------
--------------- -
------------- -----
------------ -----
------ -----
---------- -------
-
-- -------
---- -- ---- - ------- ------------- -
---------- -
--------- ---------
------ ----- - -------------- - ---
------------- ------------------ - --
------------ ------------------ - --
------ -----
-- ----
------- -
-------- ---
-------- ------
------ -----
-
-
-这样，就定义了一个简单的 12 栅格系统，可以方便地在项目中使用。
总结
SASS 中的循环函数是前端开发中非常实用的语法结构，可以方便地遍历一个变量列表、嵌套循环，并保存循环计数器等等。掌握循环函数的使用，可以让我们更加高效地编写代码，提高工作效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64e6cf03f6b2d6eab3229b39