阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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
      
      目录
      目录