stylus中文版参考文档之方法(Functions)
回到相关文章 »文档:
- 选择器(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在线体验!
详细:
方法(Functions)
函数
Stylus强大之处就在于其内置的语言函数定义。其定义与混入(mixins)一致;却可以返回值。
返回值
很简单的例子,两数值相加的方法:
add(a, b) a + b
我们可以在特定条件下使用该方法,如在属性值中:
body padding add(10px, 5)
渲染:
body { padding: 15px; }
默认参数
可选参数往往有个默认的给定表达。在Stylus中,我们甚至可以超越默认参数。
例如:
add(a, b = a) a + b add(10, 5) // => 15 add(10) // => 20
注意:因为参数默认是赋值,我们可可以使用函数调用作为默认值。
add(a, b = unit(a, px)) a + b
函数体
我们可以把简单的add()
方法更进一步。通过内置unit()
把单位都变成px
, 因为赋值在每个参数上,因此,我们可以无视单位换算。
add(a, b = a)
a = unit(a, px)
b = unit(b, px)
a + b
add(15%, 10deg)
// => 25
多个返回值
Stylus的函数可以返回多个值,就像你给变量赋多个值一样。
例如,下面就是一个有效赋值:
sizes = 15px 10px
sizes[0]
// => 15px
类似的,我们可以在函数中返回多个值:
sizes()
15px 10px
sizes()[0]
// => 15px
有个小小的例外就是返回值是标识符。例如,下面看上去像一个属性赋值给Stylus(因为没有操作符)。
swap(a, b) b a
为避免歧义,我们可以使用括号,或是return
关键字。
swap(a, b) (b a) swap(a, b) return b a
条件
比方说,我们想要创建一个名为stringish()
的函数,用来决定参数是否是字符串。我们检查val
是否是字符串或缩进(类似字符)。如下,使用yes
和no
代替true
和false
.
stringish(val) if val is a 'string' or val is a 'ident' yes else no
使用:
stringish('yay') == yes // => true stringish(yay) == yes // => true stringish(0) == no // => true
注意:yes
和no
并不是布尔值。本例中,它们只是简单的未定义标识符。
另外一个例子:
compare(a, b) if a > b higher else if a < b lower else equal
使用:
compare(5, 2) // => higher compare(1, 5) // => lower compare(10, 10) // => equal
别名
给函数起个别名,和简单,直接等于就可以了。例如上面的add()
弄个别名plus()
, 如下:
plus = add
plus(1, 2)
// => 3
变量函数
我们可以把函数当作变量传递到新的函数中。例如,invoke()
接受函数作为参数,因此,我们可以传递add()
以及sub()
.
invoke(a, b, fn) fn(a, b) add(a, b) a + b body padding invoke(5, 10, add) padding invoke(5, 10, sub)
结果:
body { padding: 15; padding: -5; }
参数
arguments
是所有函数体都有的局部变量,包含传递的所有参数。
例如:
sum()
n = 0
for num in arguments
n = n + num
sum(1,2,3,4,5)
// => 15
哈希示例
下面,我们定义get(hash, key)
方法,用来返回key
值或null
. 我们遍历每个键值对,如果键值匹配,返回对应的值。
get(hash, key) return pair[1] if pair[0] == key for pair in hash
下面例子可以证明,语言函数模样的Stylus表达式具有更大的灵活性。
hash = (one 1) (two 2) (three 3) get(hash, two) // => 2 get(hash, three) // => 3 get(hash, something) // => null