Iteration

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

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

例如:

body
  for num in 1 2 3
    foo num

生成:

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

如下实例展示的是如何使用 <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;
    }

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

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

生成:

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

Usage with strings:

for num in (1..10)
  .box{num}
    animation: box + num 5s infinite
  
  @keframes box{num}
    0%   { left: 0px }
    100% { left: (num * 30px) }

混合(Mixins)

我们可以在 mixin 中使用循环实现更强大的功能,例如,我们可以把表达式对作为使用插值和循环的属性。 We can use iteration within mixins to produce powerful functionality. For example, we can apply expression pairs as properties using interpolation and iteration.

下面,我们定义 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 循环。如下是一些实例:

求和:

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

  sum(1 2 3)
  // => 6

合并:

  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

我们还可以从循环中 return (返回),下面就是一个实例,当 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
Stylus on GitHub