一、for/in 循环

1、基础语法

Stylus 允许你使用 for/in 构造迭代表达式，格式如下：

  for <val-name> [, <key-name>] in <expression>

• <val-name>：变量名，用于存储迭代的值。
• <key-name>：可选，变量名，用于存储迭代的键。
• <expression>：要被迭代的表达式。可以是数组、对象、字符串等形式，但是一定要可迭代。

2、基础示例

2.1. for/in 循环示例：

body
  for num in 1 2 3
    foo num

编译为：

body {
  foo: 1;
  foo: 2;
  foo: 3;
}

2.2. 如何使用 <key-name>：

如下实例展示的是如何使用 <key-name>：

  body
    fonts = Impact Arial sans-serif
    for font, i in fonts
      foo i font

编译为：

body {
  foo: 0 Impact;
  foo: 1 Arial;
  foo: 2 sans-serif;
}

2.3. 普通的 for 循环：

下面展示的是如何书写普通的 for 循环：

body
  for num in (1..5)
    foo num

编译为：

body {
  foo: 1;
  foo: 2;
  foo: 3;
  foo: 4;
  foo: 5;
}

2.4. 使用字符串的例子：

for num in (1..5)
  .box{num}
    animation: box + num 5s infinite

  @keframes box{num}
    0%   { left: 0px }
    100% { left: (num * 30px) }

编译为：

.box1 {
  animation: box1 5s infinite;
}
@keframes box1 {
  0% {
    left: 0px;
  }
  100% {
    left: 30px;
  }
}
.box2 {
  animation: box2 5s infinite;
}
@keframes box2 {
  0% {
    left: 0px;
  }
  100% {
    left: 60px;
  }
}
.box3 {
  animation: box3 5s infinite;
}
@keframes box3 {
  0% {
    left: 0px;
  }
  100% {
    left: 90px;
  }
}
.box4 {
  animation: box4 5s infinite;
}
@keframes box4 {
  0% {
    left: 0px;
  }
  100% {
    left: 120px;
  }
}
.box5 {
  animation: box5 5s infinite;
}
@keframes box5 {
  0% {
    left: 0px;
  }
  100% {
    left: 150px;
  }
}

二、在 Mixins 中使用迭代

我们可以在混合（Mixins）中使用迭代来实现强大的功能。例如，我们可以通过插值和迭代将表达式对应用为属性。

下面，我们定义 apply(), 根据条件判断是否利用所有的 arguments（参数），这样逗号分隔的参数以及表达式列表参数都能够被支持。

 apply(props)
   props = arguments if length(arguments) > 1
   for prop in props
     {prop[0]} prop[1]

 body
   apply(one 1, two 2, three 3)

 body
   list = (one 1) (two 2) (three 3)
   apply(list)

三、在函数中使用迭代

Stylus 中的函数也可以包含 for 循环。如下是一些实例：

实例 1：数组求和

sum(nums)
  sum = 0
  for n in nums
    sum += n

sum(1 2 3) // => 6

实例 2：数组拼接

join(delim, args)
  buf = ''
  for arg, index in args
    if index
      buf += delim + arg
    else
      buf += arg

join(', ', foo bar baz) // => "foo, bar, baz"

四、后置表达式

就跟 if / unless 可以利用后置表达式（post-statement）一样，for 也可以。如下是一些使用后置表达式语法的例子：

sum(nums)
  sum = 0
  sum += n for n in nums


join(delim, args)
  buf = ''
  buf += i ? delim + arg : arg for arg, i in args

我们还可以从循环中返回结果，下面就是一个实例，当 n % 2 == 0 的值为 true 时就返回数值。

 first-even(nums)
   return n if n % 2 == 0 for n in nums

 first-even(1 3 5 5 6 3 2)
 // => 6

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24