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是否是字符串或缩进(类似字符)。如下,使用yesno代替truefalse.

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

注意:yesno并不是布尔值。本例中,它们只是简单的未定义标识符。

另外一个例子:

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

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

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

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

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

关注我: Github / 知乎

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

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

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

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

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