Stylus 中文网

Appearance

Return to top
On this page

迭代

¥Iteration

Stylus 允许你通过 for/in 构造迭代表达式，采用以下形式：

¥Stylus allows you to iterate expressions via the for/in construct, taking the form of:

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

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

例如：

¥For example:

body
  for num in 1 2 3
    foo num

body
  for num in 1 2 3
    foo num

产量：

¥Yields:

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

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

下面的例子展示了如何使用 <key-name>：

¥The example below shows how to use the <key-name>:

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

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

产量：

¥Yielding:

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

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

这是执行常规 for 循环的方法

¥And here's how you do a regular for loop

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

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

产量：

¥Yields:

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

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) }

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，以便支持逗号分隔和表达式列表：

¥Below we define apply(), conditionally utilizing all the arguments so that comma-delimited and expression lists are supported:

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)

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)

函数

¥Functions

Stylus 函数还可能包含 for 循环。以下是一些示例用例：

¥Stylus functions may also contain for-loops. Below are some example use-cases:

和：

¥Sum:

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

sum(1 2 3)
// => 6

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

sum(1 2 3)
// => 6

加入：

¥join:

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

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

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

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

后缀

¥Postfix

就像 if / unless 可以在语句后使用一样，for 也可以这样做。下面是使用后缀语法的与上面相同的示例：

¥Much like if / unless may be utilized post-statement, the same can be done with for. Below are the same examples as above utilizing the postfix syntax:

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


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

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 时返回数字的示例。

¥We can also return from within a loop, below is an example returning the number when n % 2 == 0 evaluates to true.

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

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

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

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