Skip to content
On this page

函数

Stylus 提供强大的语言内函数定义功能。函数定义看起来与混合器相同;然而,函数可以返回一个值。

返回值

让我们尝试一个简单的例子:创建一个将两个数字相加的函数。

stylus
add(a, b)
  a + b
add(a, b)
  a + b

然后我们可以在条件中、属性值中等地方使用这个函数。

stylus
body 
  padding add(10px, 5)
body 
  padding add(10px, 5)

渲染为:

css
body {
  padding: 15px;
}
body {
  padding: 15px;
}

参数默认值

可选参数可以默认为给定的表达式。使用 Stylus,我们甚至可以将参数默认为早期的参数!

例如:

stylus
add(a, b = a)
  a + b

add(10, 5)
// => 15

add(10)
// => 20
add(a, b = a)
  a + b

add(10, 5)
// => 15

add(10)
// => 20

注意: 由于参数默认值是赋值,我们也可以为默认值使用函数调用:

stylus
add(a, b = unit(a, px))
  a + b
add(a, b = unit(a, px))
  a + b

命名参数

函数接受命名参数。这使你不必记住参数的顺序,或者只是提高代码的可读性。

例如:

stylus
subtract(a, b)
  a - b

subtract(b: 10, a: 25)
subtract(a, b)
  a - b

subtract(b: 10, a: 25)

函数体

我们可以进一步改进我们简单的 add() 函数。让我们通过内置的 unit() 函数将所有传递的单位转换为 px。它重新分配每个参数,并提供一个单位类型字符串(或标识符),忽略单位转换。

stylus
add(a, b = a)
  a = unit(a, px)
  b = unit(b, px)
  a + b

add(15%, 10deg)
// => 25
add(a, b = a)
  a = unit(a, px)
  b = unit(b, px)
  a + b

add(15%, 10deg)
// => 25

多个返回值

Stylus 函数可以返回多个值——就像你可以给变量赋多个值一样。

例如,下面是一个有效的赋值:

stylus
sizes = 15px 10px

sizes[0]
// => 15px 
sizes = 15px 10px

sizes[0]
// => 15px 

同样,我们可以返回多个值:

stylus
sizes()
  15px 10px

sizes()[0]
// => 15px
sizes()
  15px 10px

sizes()[0]
// => 15px

一个小例外是当返回值是标识符时。例如,由于没有运算符,Stylus 将以下内容视为属性赋值:

stylus
swap(a, b)
  b a
swap(a, b)
  b a

为了消除歧义,我们可以用括号包裹,或者使用 return 关键字:

stylus
swap(a, b)
  (b a)

swap(a, b)
  return b a
swap(a, b)
  (b a)

swap(a, b)
  return b a

条件语句

假设我们想创建一个名为 stringish() 的函数,用于确定参数是否可以转换为字符串。我们检查 val 是否是字符串或标识符(类似字符串)。由于未定义的标识符会将自身作为值,我们可以如下所示将它们与自身进行比较(其中 yesno 用于代替 truefalse):

stylus
stringish(val)
  if val is a 'string' or val is a 'ident'
    yes
  else
    no
stringish(val)
  if val is a 'string' or val is a 'ident'
    yes
  else
    no

用法:

stylus
stringish('yay') == yes
// => true

stringish(yay) == yes
// => true

stringish(0) == no
// => true
stringish('yay') == yes
// => true

stringish(yay) == yes
// => true

stringish(0) == no
// => true

注意yesno 不是布尔字面量。在这种情况下,它们只是未定义的标识符。

另一个例子:

stylus
compare(a, b)
  if a > b
    higher
  else if a < b
    lower
  else
    equal
compare(a, b)
  if a > b
    higher
  else if a < b
    lower
  else
    equal

用法:

stylus
compare(5, 2)
// => higher

compare(1, 5)
// => lower

compare(10, 10)
// => equal
compare(5, 2)
// => higher

compare(1, 5)
// => lower

compare(10, 10)
// => equal

别名

要为函数创建别名,只需将函数名称赋给新的标识符。例如,我们的 add() 函数可以别名为 plus(),如下所示:

stylus
plus = add

plus(1, 2)
// => 3
plus = add

plus(1, 2)
// => 3

变量函数

与我们可以"别名"函数的方式相同,我们也可以传递函数。这里,我们的 invoke() 函数接受一个函数,所以我们可以传递 add()sub()

stylus
add(a, b)
  a + b

sub(a, b)
  a - b

invoke(a, b, fn)
  fn(a, b)

body
  padding invoke(5, 10, add)
  padding invoke(5, 10, sub)
add(a, b)
  a + b

sub(a, b)
  a - b

invoke(a, b, fn)
  fn(a, b)

body
  padding invoke(5, 10, add)
  padding invoke(5, 10, sub)

生成:

css
body {
  padding: 15;
  padding: -5;
}
body {
  padding: 15;
  padding: -5;
}

匿名函数

你可以在需要的地方使用 @(){} 语法的匿名函数。以下是如何使用它创建自定义 sort() 函数的方法:

stylus
sort(list, fn = null)
  // 默认排序函数
  if fn == null
    fn = @(a, b) {
      a > b
    }

  // 冒泡排序
  for $i in 1..length(list) - 1
    for $j in 0..$i - 1
      if fn(list[$j], list[$i])
        $temp = list[$i]
        list[$i] = list[$j]
        list[$j] = $temp
  return list

  sort('e' 'c' 'f' 'a' 'b' 'd')
  // => 'a' 'b' 'c' 'd' 'e' 'f'

  sort(5 3 6 1 2 4, @(a, b){
    a < b
  })
  // => 6 5 4 3 2 1
sort(list, fn = null)
  // 默认排序函数
  if fn == null
    fn = @(a, b) {
      a > b
    }

  // 冒泡排序
  for $i in 1..length(list) - 1
    for $j in 0..$i - 1
      if fn(list[$j], list[$i])
        $temp = list[$i]
        list[$i] = list[$j]
        list[$j] = $temp
  return list

  sort('e' 'c' 'f' 'a' 'b' 'd')
  // => 'a' 'b' 'c' 'd' 'e' 'f'

  sort(5 3 6 1 2 4, @(a, b){
    a < b
  })
  // => 6 5 4 3 2 1

arguments

arguments 局部变量在所有函数体中都可用,并包含所有传递的参数。

例如:

stylus
sum()
  n = 0
  for num in arguments
    n = n + num

sum(1,2,3,4,5)
// => 15
sum()
  n = 0
  for num in arguments
    n = n + num

sum(1,2,3,4,5)
// => 15

哈希示例

下面我们定义 get(hash, key) 函数,它返回 key 的值(或 null)。我们遍历 hash 中的每个 pair,当第一个(key)匹配时返回对的第二个节点。

stylus
get(hash, key)
  return pair[1] if pair[0] == key for pair in hash
get(hash, key)
  return pair[1] if pair[0] == key for pair in hash

如下所示,语言内函数——结合强大的 Stylus 表达式——可以提供极大的灵活性:

stylus
hash = (one 1) (two 2) (three 3)

get(hash, two)
// => 2

get(hash, three)
// => 3

get(hash, something)
// => null
hash = (one 1) (two 2) (three 3)

get(hash, two)
// => 2

get(hash, three)
// => 3

get(hash, something)
// => null

Released under the MIT License.