可变参数/多余参数(Rest Params)

Stylus支持name...形式的其余参数。这些参数可以消化传递给混写或函数的参数们。这在处理浏览器私有属性,如-moz-webkit的时候很管用。

下面这个例子中,所有的参数们(1px, 2px, ...)都被一个args参数给简单消化了:

 box-shadow(args...)
   -webkit-box-shadow args
   -moz-box-shadow args
   box-shadow args

 #login
   box-shadow 1px 2px 5px #eee

处理为:

  #login {
    -webkit-box-shadow: 1px 2px 5px #eee;
    -moz-box-shadow: 1px 2px 5px #eee;
    box-shadow: 1px 2px 5px #eee;
  }

我们想指定特定的参数,如x-offset,我们可以使用args[0], 或者,我们可能希望重新定义混合(Mixin)。

    box-shadow(offset-x, args...)
      got-offset-x offset-x
      -webkit-box-shadow offset-x args
      -moz-box-shadow offset-x args
      box-shadow offset-x args

    #login
      box-shadow 1px 2px 5px #eee

处理为:

    #login {
      got-offset-x: 1px;
      -webkit-box-shadow: 1px 2px 5px #eee;
      -moz-box-shadow: 1px 2px 5px #eee;
      box-shadow: 1px 2px 5px #eee;
    }

参数

arguments变量被注入到mixin和函数体中,包含传递的确切表达式。 当您获得_exact_表达式,逗号和所有内容时,这有几个原因(特别是供应商支持)很有用。

例如,如果我们使用rest param,则会使用逗号(因为它是表达式分隔符):

  box-shadow(args...)
    -webkit-box-shadow args
    -moz-box-shadow args
    box-shadow args

  #login
    box-shadow #ddd 1px 1px, #eee 2px 2px

产生不良结果:

  #login {
    -webkit-box-shadow: #ddd 1px 1px #eee 2px 2px;
    -moz-box-shadow: #ddd 1px 1px #eee 2px 2px;
    box-shadow: #ddd 1px 1px #eee 2px 2px;
  }

让我们使用arguments重新定义mixin:

  box-shadow()
    -webkit-box-shadow arguments
    -moz-box-shadow arguments
    box-shadow arguments

  body
    box-shadow #ddd 1px 1px, #eee 2px 2px

现在,产生预期的结果:

  body {
    -webkit-box-shadow: #ddd 1px 1px, #eee 2px 2px;
    -moz-box-shadow: #ddd 1px 1px, #eee 2px 2px;
    box-shadow: #ddd 1px 1px, #eee 2px 2px;
  }