Stylus 迭代 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;
}

下面这个例子演示了如何使用:

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

混合书写(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)

函数(Functions)

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"

后缀(Postfix)

就跟if/unless可以利用后面语句一样,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 == 0true的时候返回数值。

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

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

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了