stylus中文版参考文档之迭代(Iteration)
回到相关文章 »文档:
- 选择器(Selectors)
- 变量(Variables)
- 插值(Interpolation)
- 运算符(Operators)
- 混合书写(Mixins)
- 方法(Functions)
- 关键字参数(Keyword Arguments)
- 内置方法(Built-in Functions)
- 其余参数(Rest Params)
- 注释(Comments)
- 条件(Conditionals)
- 迭代(Iteration)
- @import
- @media
- @font-face
- @keyframes
- @extend
- url()
- CSS字面量(CSS Literal)
- CSS样式解析(CSS Style Syntax)
- 字符转码(Char Escaping)
- 可执行性(Executable)
- 错误报告(Error Reporting)
- 连接中间件(Connect Middleware)
- 自检API(Introspection API)
- JavaScript API
- Nib下CSS扩展(CSS3 Extensions with Nib)
- 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; }
下面这个例子演示了如何使用<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; }
混合书写(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 == 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