SASS 的循环函数及用法详解

阅读时长 4 分钟读完

在前端开发中,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

纠错
反馈